第10章 DOM
10.1 节点层次
文档元素，文档最外层元素，文档中其他所有元素都包含在文档元素中。HTML中文档元素是<html>。
总共有12种节点类型。
JavaScript中所有节点类型都继承自Node类型，可通过nodeType属性判断节点类型。
对于元素节点，nodeName是标签名，nodeValue为null。
childNodes，用法childNodes[0]或childNodes.item(0)。
parentNode、previousSibling、nextSibling。
hasChildNodes()在节点包含一或多个字节点返回true。
appendChild()向childNodes列表末尾添加一个节点。
insertBefore()接受两个参数：插入的节点和参照的节点。在参照节点前插入一个同胞节点。
replaceChild()、removeChild()。
cloneNode()参数为true进行深复制，为false进行浅复制。
normalize()合并多个相邻文本节点。
nodeName和tagName可以访问元素标签名，输出为大写，比较时需要使用toLowerCase()转换成小写。
元素标准特性，id、title、lang（少用）、dir（少用）、className。
getAttribute()、setAttribute()、removeAttribute()。
只有公认的（非自定义的）特性才会以属性形式添加到DOM对象中。
attributes属性拥有下列方法：getNamedItem(name)、removeNamedItem(name)、setNamedItem(node)、item(pos)。
document.createElement()接受一个参数：要创建的元素名。IE中可用createElement()传入完整的元素标签和属性。
元素的子节点可能是元素、文本、注释或处理指令。
可以使用nodeValue或data属性访问文本节点中包含的文本。
document.createTextNode()创建新文本节点。
splitText(pos)将一个文本节点按照指定位置分成两个文本节点，返回一个新文本节点。
document.createComment()传递注释文本或创建注释节点。
document.createCDataSection()在XML文档中创建CDATA区域。
document.doctype有三个属性：name、entities、notaions。
document.createDocumentFragment()创建文档片段。
Attr对象有三个属性：name、value、specified。
10.2 DOM操作技术
构建表格，table、tbody、tr。
第11章 DOM扩展
11.1 选择符API
querySelector()接收一个css选择符，返回匹配的第一个元素，无则返回null。
querySelectorAll()接收一个css选择符，返回匹配的元素数组。
matchesSelector()接收一个css选择器，如果调用元素与该选择符匹配返回true，否则返回false。不同浏览器需要以不同变体（msMatchesSelector、mozMatchesSelector、webkitMatchesSelector）以支持该方法。
11.2 元素遍历
为弥补不同浏览器使用childNodes等属性行为不一致情况，新增childElementCount、firstElementChild、lastElementChild、previousElementSibling、nextElementSibling。
11.3 HTML5
getElementsByClassName()，接收一个包含一或多个类名的字符串，返回指定类的所有元素数组。
在操作类名时，通过className属性添加、删除和替换类名。
classList属性有add、contains、remove、toggle方法。
document.activeElement属性始终会引用DOM中当前获得了焦点的元素。
document.hasFocus()用于确定文档是否获得了焦点。
document.readyState，用于实现一个指示文档已经加载完成的指示器。有loading和complete两个可能值。
document.compatMode检测浏览器采用哪种渲染模式，CSS1Compat标准模式，BackCompat混杂模式。
document.head引用文档的<head>元素。
document.charset表示文档实际使用的字符集，或指定新字符集，默认值为UTF-16。defaultCharset表示根据默认浏览器及操作系统的设置默认文档的字符集。charset与defaultCharset不同则表示文档字符集有修改。
自定义属性要添加前缀data-，可以使用dataset属性访问。
innerHTML，读模式下返回与调用元素的所有子节点对应的HTML。写模式下根据指定值创建HTML，替换调用元素的所有子节点。
outerHTML，读模式下返回调用元素及所有子节点的HTML。写模式下根据指定值创建HTML，完全替换调用元素。
insertAdjacentHTML()接收两个参数：插入位置和要插入的HTML文本。第一个参数为下列值之一：beforebegin、afterbegin、beforeend、afterend。
使用innerHTML、outerHTML、insertAdjacentHTML()时最好先收工删除要被替换的元素的所有事件处理程序和JavaScript对象属性。
scrollIntoView()通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。
11.4 专有扩展
文档模式决定页面可以使用什么功能。<meta>中content可以设置IE版本有以下值：Edge、EmulateIE9、EmulateIE8、EmulateIE7、9、8、7、5。
document.documentMode可以知道给定页面是什么文档模式。
children只包含元素中同样还是元素的子节点。
contains()接收一个要检测的后代元素，是则返回true，否则返回false。
compareDocumentPosition(参考节点)确定两个节点间关系，1无关，2局前，4居后，8包含，16被包含。
innerText读取值时，按照由浅入深顺序将文档树中所有文本拼接起来；写入值时，删除元素所有子节点插入包含相应文本值的文本节点。类似属性textContent，Firefox支持。
outerText读取值时，按照由浅入深顺序将文档树中所有文本拼接起来；写入值时，替换整个元素（包含子节点）。
scrollIntoViewIfNeeded(alignCenter)只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素使其可见。
scrollByLines(lineCount)将元素内容滚动指定的行高。
scrollByPages(pageCount)将元素内容滚动指定的页面高度。
第12章 DOM2和DOM3
12.1 DOM变化
命名空间用xmlns特性指定，想要为XML命名空间创建前缀，可使用xmlns:再后跟前缀。有时为避免不同语言间冲突，也需要使用命名空间来限定特性，如xhtml:class=“home”。
DOM2级中，Node类型包含下列特定于命名空间的属性：localName、namespaceURI、prefix。
DOM3级中，命名空间有关的方法：isDefaultNamespace(namespaceURI)、lookupNamespaceURI(prefix)、lookupPrefix(namespaceURI)。
DOM2级中，Document类型与命名空间有关的方法：createElementNS(namespaceURI,tagName)、createAttributeNS(namespaceURI,attributeName)、getElementsByTagNameNS(namespaceURI,tagName)。
DOM2级核心中，Element操作特性：getAttributeNS(namespaceURI,localName)、getAttributeNodeNS(namespaceURI,localName)、getElementsByTagNameNS(namespaceURI,tagName)、hasAttributeNS(namespaceURI,localName)、removeAttributeNS(namespaceURI,localName)、setAttributeNS(namespaceURI,qualifiedName,value)、setAttributeNodeNS(namespaceURI,attNode)。
NameNodeMap类型与命名空间有关的方法：getNamedItemNS(namespaceURI,localName)、removeNamedItemNS(namespaceURI,localName)、setNamedItemNS(node)。
DocumentType新增三个属性：publicId、systemId、internalSubset。
Document类型变化：importNode()，从文档中取得一个节点导入到另一个文档成为其文档结构一部分。接受2个参数：要复制的节点、是否复制子节点的布尔值。
DOM2级视图新增defaultView属性，IE中为parentWindow，确定文档的归属窗口。
DOM2级核心为document.implementation新增2个新方法：createDocumentType()接受3个参数：文档类型名称、publicId、systemId；createDocument()接受3个参数：针对文档中元素的namespaceURI、文档元素的标签名、新文档的文档类型。
DOM2级HTML为document.implementation新增新方法：createHTMLDocument()创建一个完整的HTML文档，接受一个参数：新创建文档的标题。
Node类型新方法：isSupported()用于确定当前节点具有什么能力，接受2个参数：特性名和特性版本号。
DOM3级两个辅助比较节点的方法：isSameNode()和isEqualNode()，接受一个节点参数，在传入节点与引用节点相同或相等时返回true。相同指两个节点引用同一个对象；相等指两个节点相同类型，具有相等属性。
DOM3级对DOM节点添加额外数据方法：setUserData()，接受3个参数：要设置的键、实际的数据、处理函数。其中处理函数接受5个参数：操作类型值（1复制、2导入、3删除、4重命名）、数据键、数据值、源节点、目标节点。
DOM2级框架新属性：contentDocument，包含一个指针，指向表示框架内容的文档对象。IE8使用contentWindow。
12.2 样式
DOM2级样式为style对象定义的属性和方法：cssText、length、parentRule、getPropertyCSSValue(propertyName)、getPropertyPriority(propertyName)、getPropertyValue(propertyName)、item(index)、removeProperty(propertyName)、setProperty(propertyName,value,priority)。
DOM2级样式增强了document.defaultView，提供了getComputedStyle()方法，接受2个参数：要取得计算样式的元素、一个伪元素字符串。返回CSSStyleDeclaration对象，包含当前元素的所有计算的样式。
通过document.styleSheets可以读取样式表中的属性：disabled（支持读写）、href、media、ownerNode、parentStyleSheet、title、type。
styleSheets还支持cssRules、ownerRule、deleteRule(index)、insertRule(rule,index)。
cssRule对象表示样式表中的每一条规则。包含下列属性：cssText（常用）、parentRule、parentStyleSheet、selectorText（常用）、style（常用）、type。
insertRule()方法可以向现有样式表中添加新规则，接受2个参数：规则文本和表示在哪里插入规则的索引。IE8中相似方法addRule()，该方法最多可以添加4095条样式规则。
deleteRule()删除规则，接受一个参数：要删除的规则的位置。IE支持的方法为removeRule()。
偏移量：offsetHeight、offsetWidth、offsetLeft、offsetTop。想知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环至根元素，就可以得到一个基本准确的值。
客户区大小，指元素内容及其内边距所占据的空间大小。clientWidth属性是元素内容区宽度加左右内边距宽度，clientHeight属性是元素内容区高度加上下内边距高度。
滚动大小，指包含滚动内容的元素大小。scrollHeight没有滚动条情况下元素内容的总高度，scrollWidth没有滚动条情况下元素内容的总宽度，scrollLeft被隐藏在内容区域左侧的像素数，scrollTop被隐藏在内容区域上方的像素数。
在确定文档总高度（包括基于视口的最小高度）时，必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，才能保证在跨浏览器环境下得到精确结果。
元素尚未滚动时，scrollLeft和scrollTop值为0。
getBoundingClientRect()有4个属性left、top、right、bottom，给出了元素在页面中相对于视口的位置。一般right和left的差值与offsetWidth值相等，bottom和top的差值与offsetHeight值相等。
12.3 遍历
DOM2级遍历和范围定义2个用于辅助完成顺序遍历DOM结构的类型：NodeIterator、TwreeWalker。能够基于给定的起点对DOM结构执行深度优先的遍历操作。
document.createNodeIterator()方法接受4个参数：root、whatToShow（位掩码，以常量形式在NodeFilter类型中定义）、filter、entityReferenceExpansion。调用如document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false)。
NodeIterator两个主要方法：nextNode()、previousNode()。
TwreeWalker方法：nextNode()、previousNode()、parentNode()、firstChild()、lastChild()、nextSibling()、previousSibling()。
TwreeWalker属性：currentNode，表示任何遍历方法在上一次遍历中返回的节点。
在使用NodeIterator对象时，NodeFilter.FILTER_SKIP与NodeFilter.FILTER_REJECT作用相同：跳过指定节点。在使用TwreeWalker对象时，NodeFilter.FILTER_SKIP会跳过相应节点继续前进到子树中下一节点，NodeFilter.FILTER_REJECT会跳过相应节点及该节点的整个子树。
12.4 范围
createRange()可以创建DOM范围。
Range类型实例的属性和方法：startContainer、startOffset、endContainer、endOffset。
selectNode()和selectNodeContents()接受一个参数：DOM节点，使用该节点中的信息来填充范围。selectNode()选择整个节点（含子节点），selectNodeContents()只选择节点的子节点。
精细控制范围方法：setStartBefore(refNode)、setStartAfter(refNode)、setEndBefore(refNode)、setEndAfter(refNode)。
创建复杂范围：setStart()和setEnd()。接受两个参数：一个参照节点、一个偏移量值。
deleteContents()从文档中删除范围所包含的内容。
extractContents()从文档中移除范围选区，返回范围文档片段，可以用于插入到文档中其他地方。
cloneContents()创建范围对象的一个副本，然后在文档其他地方插入该副本。
insertNode()可以向范围选区的开始处插入一个节点。
surroundContents()环绕范围插入内容，接受一个参数：环绕范围内容的节点。
折叠范围，指范围中未选择文档的任何部分。
collapse()方法用来折叠范围，接受一个参数：布尔值，表示要折叠到范围的哪一端。true表示起点，false表示终点。
compareBoundaryPoints()确定范围是否有公共边界（起点或终点）。接受2个参数：表示比较方式的常量值、要比较的范围。比较方式常量值：Range.START_TO_START(0)、Range.START_TO_END(1)、Range.END_TO_END(2)、Range.END_TO_START(3)。compareBoundaryPoints()可能返回的值：第一个范围中的点位于第二个范围中的点前，返回-1；两点相等，返回0；第一个范围中的点位于第二个范围中的点后，返回1。
cloneRange()复制范围，创建调用它的范围的副本。
detach()调用完范围后，从创建范围文档中分离出该范围。通常与range=null连用。
