第11章、DOM扩展

11.1 选择符API

querySelector()和querySelectorAll()两个方法接收一个CSS选择符，querySelector()返回与该模式匹配的第一个元素，querySelectorAll()返回所有与该模式匹配的元素组成的NodeList实例。可以在document和Element类型上调用这两个方法。
matchesSelector()方法接收一个CSS选择符，如果调用该方法的元素与该匹配模式相匹配，则返回true，否则返回false。

11.2 元素遍历

因为直接获取元素子节点时，元素之间的空白符会解析成文本节点，Element新定义属性。
childElementCount，返回子元素的个数。
firstElementCount，指向第一个子元素。
lastElementCount，指向最后一个子元素。
previousElementSibling，指向前一个同辈元素。
nextElementSibling，指向后一个同辈元素。
利用这些属性可以不必担心空白的文本节点，它们只会作用在元素节点上。

11.3 HTML5

11.3.1 与类相关扩充

getElementsByClassName()方法接收一个参数，即包含一个或多个类名的字符串，返回带有指定类名的元素组成的NodeList。传入多个类名时，先后顺序没有影响。
classList属性，是新集合类型DOMTokenList的实例，包含元素所有的类名。具有以下方法：
add()，传入字符串参数，为元素添加指定类名。如果已存在则不添加。
contains()，传入字符串参数，检测元素是否已包含指定类名，包含则返回true，否则返回false。
remove()，传入字符串参数，删除指定的类名。
toggle()，传入字符串参数，如果列表中存在该类名，则删除，如果不存在，则添加。

11.3.2 焦点管理

document.activeElement属性，始终引用DOM中当前获得了焦点的元素。文档刚刚完成加载时，该属性中保存的是document.body元素的引用。
document.hasFocus()方法，判断文档是否获得了焦点。通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互。

11.3.3 HTMLDocument变化

document.readyState属性，该属性有两个可能值：loading表示正在加载文档，complete表示文档加载完毕。
document.compatMode属性，表示页面渲染模式是标准还是混杂，标准模式下，其值为“CSS1Compat”，混杂模式下，其值为“BackCompat”。
document.head属性，该属性引用文档的<head>元素。

// 与onload事件处理程序一起使用
if(document.readyState == "complete"){
    // 执行操作
}
// 判断网页渲染模式
if(document.compatMode == "CSS1Compat"){
    console.log("标准模式");
}else{
    console.log("混杂模式");
}
// 兼容性获取head元素
var head = document.head || document.getElementsByTagName("head")[0];

11.3.4 字符集属性

document.charset属性，表示文档中实际使用的字符集，默认值为“UTF-16”，可以修改。
document.defaultCharset属性，根据默认浏览器及操作系统设置，表示当前文档的默认字符集。

11.3.5 自定义数据属性

元素可以添加非标准的属性，但要添加data-前缀。为元素提供与渲染无关的信息，或语义信息。添加了自定义属性后，可以通过dataset属性来访问自定义属性的值。属性名没有data-前缀。

<p data-myname="a"></p>

 var p = document.querySelector("p");
 console.log(p.dataset.myname);  // a

11.3.6 插入标记

使用插入标记技术，直接插入HTML字符串，比DOM操作更加简单，速度也更快。
innerHTML属性，返回调用元素的所有子节点对应的HTML标记，可以修改，会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
outerHTML属性，返回调用元素本身和其所有子节点对应的HTML标记，可以修改，会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素本身和其原先的所有子节点。
insertAdjacentHTML()方法，接收两个参数，第一个参数必须为以下值：
“beforebegin”，在当前元素前插入一个紧邻的同辈元素。
“afterbegin”，在当前元素的第一个子元素之前插入一个新子元素。
“beforeend”，在当前元素的最后一个子元素之后插入一个新子元素。
“afterend”，在当前元素后插入一个紧邻的同辈元素。
第二个参数为HTML字符串，与innerHTML和outerHTML相同。
多次使用innerHTML会导致性能问题，最好的做法是单独构建好字符串，带一次性将结果字符串赋值给innerHTML。

11.3.7 scrollIntoView()方法

可以在所有元素上调用该方法，让调用元素出现在浏览器视口当中，传入true参数或者不传参数时，元素滚动后会尽量与视口顶部齐平。传入false参数时，元素会尽可能全部出现在视口中（尽可能与底部齐平）。

11.4 专有扩展

11.4.1 children属性

children属性将只包含元素子节点，会忽略元素之间的空白符。当元素只包含元素子节点时，与childNodes相同。

11.4.2 contains()方法

该方法用于判断一个节点是否为另一个节点的后代，祖先节点调用该方法，接收一个参数，即要检测的后代节点，参数是后代节点则返回true，否则返回false。

<div id="a">
    <p id="b">abc</p>
</div>

var a = document.querySelector("#a");
var b = document.querySelector("#b");
console.log(a.contains(b));  // true

compareDocumentPosition()方法也能检测节点之间的关系，返回一个表示两个节点关系的位掩码。
1，无关；
2，居前；
4，局居后；
8，包含；
16，被包含。

var a = document.querySelector("#a");
var b = document.querySelector("#b");
console.log(a.compareDocumentPosition(b));  // 20（表示居后的4加上表示被包含的16）

兼容性检测一个节点是否为某个节点子节点的方法：

function containsNode(node1,node2) {
    if(typeof node1.contains == "function"){
        return node1.contains(node2);
    }else if(typeof node1.compareDocumentPosition == "function"){
    // 对掩码执行按位与，再用两个逻辑非操作符将其转为布尔值
        return !!(node1.compareDocumentPosition(node2) & 16);
    }else{
    // 两个方法都不支持则从自身开始向上遍历DOM判断。
        var node = node2.parentNode;
        do{
            if(node === node1){
                return true;
            }else{
                node = node.parentNode;
            }
        }while (node !== null);
    }
}