第十章 DOM
1、Node类型：12种数值常量——Node.ELEMENT_NODE(1), Node.ATTRIBUTE_NODE(2), Node.TEXT_NODE(3),Node.CDATA_SECTION_NODE(4),Node.ENTITY_REFERENCE_NODE(5),Node.ENTITY_NODE(6),Node.PROCESSING_INSTRUCTION_NODE(7),Node.COMMENT_NODE(8),Node.DOCUMENT_NODE(9),Node.DOCUMENT_TYPE_NODE(10),Node.DOCUMENT_FRAGMENT_NODE(11),Node.NOTATION_NODE(12)；每个节点都有一个nodeType属性
1）节点关系：每个节点都有一个childNodes属性，其中保存着一个NodeList对象，可以通过方括号以及item()方法来访问NodeList，可以通过length属性来表示访问NodeList那一刻的节点数量；每个节点都有一个parentNode属性，该属性指向文档树中的父节点；通过使用childNodes列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点，childNodes列表中的第一个节点的previousSibling属性值为null，childNodes列表中的最后一个节点的nextSibling属性值为null；父节点的firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点；每个节点都有一个ownerDocument属性，该属性指向表示整个文档的文档节点
2）操作节点：appendChild()方法用于向childNodes列表的末尾添加一个节点，添加节点后，childNodes的新增节点、父节点和以前的最后一个子节点的关系指针就会相应地得到更新，更新完成后，appendChild()返回新增节点；insertBefore()方法用于向childNodes列表中的某个特定位置之前添加一个节点，接收两个参数——要插入的节点和作为参照的节点，如果参照节点是null，则insertBefore()与appendChild()执行相同的操作；replaceChild()用于向childNodes列表中的某个特定位置替换一个节点，接收两个参数——要插入的节点和要替换的节点；remove()用于向childNodes列表中的某个特定位置移除一个节点，接收一个参数——要移除的节点，remove()返回被移除的节点，被移除的节点仍然为文档所有，只不过在文档中已经没有位置
3）其他方法：cloneNode()用于创建这个方法的节点的一个完全相同的副本，接收一个布尔值参数，表示是否执行深复制，在参数为true的情况下执行深复制，复制节点及整个子节点树，否则执行浅复制，只复制节点本身；normalize()用于处理文档树中的文本节点，如果找到空文本节点就删除它，如果找到相邻的文本节点就将它们合并为一个文本节点
2、Document类型：用于表示HTML页面或基于XML的文档以及作为HTMLDocument实例的document对象
1）Document节点：nodeType的值为9；nodeName的值为”#document”；nodeValue的值为null；parentNode的值为null；ownerDocument的值为null；其子节点可能是一个DocumenType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment
2）文档的子节点：document.documentElement属性用于指向HTML页面中的<html>元素；document.body属性用于指向HTML页面中的<body>元素；document.doctype属性用于指向HTML页面中的<!DOCTYPE>元素
3）文档信息：document.title属性包含<title>元素的文本；document.URL属性包含页面完整的URL（地址栏中显示的URL）；document.domain属性包含页面的域名，可以手动设置，不过不能由loose转为tight；document.referrer属性包含链接到当前页面的那个页面的URL
4）查找元素：document.getElementsById()接收一个参数——要取得的元素的ID（区分大小写），如果找到相应的元素则返回该元素，否则返回null；document.getElementsByTagName()接收一个参数——要取得的元素的标签名，返回的是包含零或多个元素的NodeList，在HTML文档中返回一个HTMLCollection对象，可以通过方括号中传入数值或字符串形式的索引值或者通过对数值数值索引调用item()、对字符串索引调用namedItem()取得元素；document.getElementsByTagName()接收一个参数——要取得的元素的name，常常用于取得单选按钮，返回一个HTMLCollection对象
5）特殊集合：document.anchors包含文档中所有带name特性的<a>元素；document.applets包含文档中所有的<applet>元素；document.forms包含文档中所有的<form>元素；document.images包含文档中所有的<img>元素；document.links包含文档中所有带href特性的<links>元素；
6）DOM一致性检测：document.implementation属性用于提供DOM的信息和功能，与浏览器对DOM的实现相对应；DOM1只为document.implementation规定了一个方法hasFeature()，接收两个参数——要检测的DOM功能的名称和版本号，如果浏览器支持给定名称和版本的功能，则返回true
7）文档写入：write()和writeln()方法都接收一个字符串参数——要写入到输出流中的文本，write()会原样写入，writeln()则会在字符串的末尾添加一个换行符；open()和close()分别用于打开和关闭网页的输出流，如果是在页面加载期间
3、Element类型：用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问
1）Element节点：nodeType的值为1；nodeName的值为元素的标签名；nodeValue的值为null；parentNode可能是Document或Element；其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference
2）标准特性：id表示元素在文档中的唯一标识符；title表示有关文档的附加信息；lang表示元素内容的语言代码；dir表示语言的方向，值为ltr或rtl；className与元素的class特性对于
3）操作特性：getAttribute()接收一个参数——要取得的特性名，取得实际特性或自定义特性的值；setAttribute()接收两个参数——要设置的特性名和值；removeAttribute()接收一个参数——要删除的特性名
4）attributes属性：Element类型是使用attributes属性的唯一一个DOM节点类型，attributes属性中包含一个NamedNodeMap对象；getNamedItem(name)返回nodeName属性等于name的节点；removeNamedItem(name)从列表中删除nodeName属性等于name的节点；setNamedItem(node)向列表中添加节点，以节点nodeName属性为索引；item(pos)返回位于数字pos位置处的节点
5）创建元素：document.createElement()用于创建一个新元素，接收一个参数——要创建的元素的标签名；要把新元素添加到文档树中，可以使用appendChild()、insertBefore()、replaceChild()方法
6）元素的子节点：元素的childNodes属性中包含了它的所有的子节点
4、Text类型：包含的是可以按照字面解释的纯文本内容
1）Text节点：nodeType的值为3；nodeName的值为”#text”；nodeValue的值为节点所包含的文本；parentNode是一个Element；不支持子节点
2）操作文本节点：appendData(text)将text添加到节点的末尾；deleteData(offset,count)从offset指定的位置开始删除count个字符；insertData(offset,text)在offset指定的位置插入text；replaceData(offset,count,text)用text替换从offset指定的位置开始到offset+count为止处的文本；splitText(offset)从offset指定的位置将当前文本节点分成两个文本节点；subStringData(offset,count)提取从offset指定的位置开始到offset+count为止处的字符
3）创建文本节点：document.createTextNode()创建新文本节点，接收一个参数——要插入节点中的文本
4）规范文本节点：element.normalize()将相邻地同胞文本节点合并
5）分割文本节点：splitText()将一个文本节点分成两个文本节点，接收一个参数——要分割的位置，原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本
5、Comment类型：用于表示注释
1）Comment节点：nodeType的值为8；nodeName的值为”#comment”；nodeValue的值为注释的内容；parentNode可能是Document或Element；不支持子节点
2）Comment类型与Text类型继承自相同的基类，因此拥有除splitText()之外的所有字符串操作方法
6、CDATASection类型：只针对基于XML的文档，表示的是CDATA区域
7、DocumentType类型：包含着与文档的doctype有关的所有信息
1）nodeType的值为10；nodeName的值为doctype的名称；nodeValue的值为null；parentNode可能是Document；不支持子节点
8、DocumentFragment类型：用于包含和控制节点，但不会占用额外的资源
1）DocumentFragment节点：nodeType的值为11；nodeName的值为”#document-fragment”；nodeValue的值为null；parentNode的值为null；其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference
2）创建文档片段：document.createDocumentFragment()用于保存将来可能要添加到文档中的节点
3）添加文档片段：appendChild()或insertBefore()用于将文档片段中的所有子节点添加到相应文职
9、Attr类型：用于表示元素的特性
1）Attr节点：nodeType的值为2；nodeName的值为特性的名称；nodeValue的值为特性的值；parentNode的值为null；在HTML中不支持子节点；在XHTML中子节点可以是Text或EntityReference
10、DOM操作技术
1）动态脚本：创建动态脚本的方式——插入外部文件和直接插入JavaScript代码；
插入外部文件：
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
直接插入JavaScript代码：
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code));
} catch (ex){
script.text = code;
}
document.body.appendChild(script);
}
2）动态样式：创建动态样式的方式——<link>元素包含来自外部的文件和<style>元素指定嵌入的样式；
<link>元素包含来自外部的文件：
function loadStyles(url){
var link = document.createElement("link");
link.rel = “stylesheet”;
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
<style>元素指定嵌入的样式：
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css));
} catch (ex){
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
3）操作表格
//创建表格
var table = document.createElement(“table”);
table.border = 1;
table.width = “100%”;
//创建tbody
var tbody = document.createElement(“tbody”);
table.appenChild(tbody);
//创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode(“cell 1,1”));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode(“cell 2,1”));
//创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode(“cell 1,2”));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode(“cell 2,2”));
//将表格添加到文档主体中
document.body.appendChild(table);
4）使用NodeList
第11章 DOM扩展
1、选择符API（Selectors API）
1）querySelector()方法：接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null
2）querySelectorAll()方法：接收一个CSS选择符，返回与该模式匹配的一个NodeList对象；要取得返回的NodeList对象中的每一个元素，可以使用item()方法，也可以使用方括号语法
3）matchesSelector()方法：接收一个CSS选择符，如果调用元素与该选择符匹配，返回true，否则返回false
2、元素遍历：Element Traversal API为DOM元素添加了5个属性
1）childElementCount：返回子元素（不包括文本节点和注释）的个数；
2）firstElementChild：指向第一个子元素；
3）lastElementChild：指向最后一个子元素；
4）previousElementSibling：指向前一个同辈元素；
5）nextElementSibling：指向后一个同辈元素；
3、HTML5
1）与类相关的扩充：
getElementsByClassName()方法接收一个参数——包含一或多个类名的字符串（类名的顺序无关），返回带有给定类的所有元素的NodeList对象；
classList属性添加、删除、替换类名，add(value)将给定的的字符串添加到列表中，如果存在就不添加；contain(value)表示列表中是否存在给定的值，如果存在返回true，否则返回false；remove(value)从列表中删除给定的字符串；toggle(value)如果列表中已经存在给定的值就删除它，如果列表中没有存在给定的值就添加它
2）焦点管理：
默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用；文档加载期间，document.activeElement的值为null；
document.hasFocus()方法用于确定文档是否获得了焦点
3）HTMLDocument的变化
document.readyState属性表示文档的加载状态，值为loading表示正在加载文档，值为complete表示已经加载完文档；
document.compatMode属性用于检测页面的兼容模式，值为CSS1Compat表示标准模式，值为BackCompat表示混杂模式；
document.head属性用于引用文档的<head>元素
4）字符集属性：document.charset自定义字符集；document.defaultCharset表示根据默认浏览器及操作系统的设置字符集
5）自定义数据属性：为元素提供与渲染无关的信息，或者提供语义信息；需要添加前缀data-；通过元素的dataset属性来访问自定义数据属性的值
6）插入标记：
innerHTML属性：在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记；在写模式下，innerHTML属性会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点
outerHTML属性：在读模式下，innerHTML属性返回与调用元素本身及所有子节点（包括元素、注释和文本节点）对应的HTML标记；在写模式下，innerHTML属性会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素
insertAdjacentHTML()方法：接收两个参数——插入位置（beforebegin、afterbegin、beforeend、afterend）和要插入的HTML文本
4、专有扩展
第十二章 DOM2和DOM3
1、DOM2和DOM3模块
DOM2级核心：在1级核心的基础上构建，为节点添加了更多的方法和属性
DOM2级视图：为文档定义了基于样式信息的不同视图
DOM2级事件：说明了如何使用事件和DOM文档交互
DOM2级样式：定义了如何以编程方式来访问和改变CSS样式信息
DOM2级遍历和范围：引入了遍历DOM文档和选择其特定部分的新接口
DOM2级HTML：在1级HTML基础上创建，添加了更多属性、方法和新接口
DOM3级XPath模块：
DOM3级加载与保存模块
2、DOM变化
3、样式
1）访问元素的样式：任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性，这个style对象是CSSStyleDeclaration的实例；对于使用短划线的CSS属性名必须将其转换成驼峰大小写形式才能通过JavaScript来访问，不能直接转换的是float属性，应转换为cssFloat（IE则是styleFloat；
2）计算的样式：DOM2级样式增强了document.defaultView，提供了getComputedStyle()方法，接收两个参数——要取得计算样式的元素和一个伪元素字符串（如果不需要伪元素信息，则为null），返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式；IE不支持getComputedStyle()方法，它有currentStyle属性
3）操作样式表：应用于文档的所有样式表是通过document.styleSheets集合来表示，通过这个集合的length属性可以获知文档中样式表的数量，而通过方括号语法或item()方法可以访问每一个样式表
4、元素大小
1）偏移量
offsetHeight：元素在垂直方向上占用的空间大小
offsetWidth：元素在水平方向上占用的空间大小
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离
2）客户区大小：元素内容及其内边距所占据的空间大小
clientWidth：元素内容区宽度加上左右内边距宽度
clientHeight：元素内容区高度加上上下内边距宽度
3）滚动大小：包含滚动内容的元素大小
scrollHeight：在没有滚动条的情况下，元素内容的总高度
scrollWidtht：在没有滚动条的情况下，元素内容的总宽度
scrollLeft：被隐藏在内容区域左侧的像素数
scrollTop：被隐藏在内容区域上侧的像素数
4）确定元素大小：getBoundingClientRect()方法确定元素在页面中相对于视口的位置，返回一个矩形对象包含四个属性——left、top、right和bottom
5、遍历：基于给定的起点对DOM结构执行深度优先
1）NodeIterator：
创建NodeIterator：document.createNodeIterator()，接收四个参数——root（搜索起点）、whatToShow（被访问节点的数字代码）、filter（一个NodeIterator对象或一个表示应该接受还是拒绝某种特定节点的函数）、entityReferenceExpansion（布尔值，表示是否要扩展实体引用）
操作NodeIterator：nextNode()和previousNode()方法都基于NodeIterator在DOM结构中的内部指针工作
2）TreeWalker
创建TreeWalker：document.TreeWalker(),接受四个参数——作为遍历起点的根节点、要显示的节点类型、过滤器和一个表示是否扩展实体引用的布尔值（同NodeIterator）
操作TreeWalker：nextNode()、previousNode()、parentNode()、firstChild()、lastChild()、nextSibling()、previousSibling
6、范围
1）创建范围：document.createRange()
2）范围属性：startContainer（范围起点）、startOffset（范围在startContainer中起点的偏移量）、endContainer（范围终点）、endOffset（范围在endContainer中终点的偏移量）、commonAncestorContainer：startContainer和endContainer共同的祖先元素在节点树中位置最深的那个
3）操作范围：
selectNode()接收一个参数——一个DOM节点，选择整个节点，包括其子节点，startContainer、endContainer、commonAncestorContainer都等于传入节点的父节点；selectNodeContents()接收一个参数——一个DOM节点，只选择节点的子节点，startContainer、endContainer、commonAncestorContainer都等于传入节点；
setStart()和endStart都接收两个参数——一个参照节点和一个偏移量，对setStart()来说，参照节点为startContainer，偏移量为startOffset，对setEnd()来说，参照节点为endContainer，偏移量为endOffset。
deleteContents()用于从文档中删除范围所包含的内容；cloneContents()用于创建范围对象的一个副本，然后在文档的其他地方插入该副本；
insertNode()用于向范围选取的开始处插入一个节点；
collapse()用于折叠范围，接收一个参数——布尔值，值为true表示折叠到范围的起点，值为false表示折叠到范围的终点；
compareBoundaryPoints()确定这些范围是否有公共的边界（起点或终点），接收两个参数——表示比较方式的常量值和要比较的范围；cloneRange()用于创建调用它的范围的一个副本；detach()用于从创建范围的文档中分离出该范围