DOM拓展

Selectors API

querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。

querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。

matchesSelector()
Selectors API Level 2 规范为Element类型新增了一个方法matchesSelector()。这个方法接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。

element新属性（方便排除文本节点和注释节点的干扰）
childElementCount：返回子元素（不包括文本节点和注释）的个数。
firstElementChild：指向第一个子元素；firstChild的元素版。
lastElementChild：指向最后一个子元素；lastChild的元素版。
previousElementSibling：指向前一个同辈元素；previousSibling的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling的元素版。

H5新增
getElementsByClassName()
getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。来看下面的例子。

classList属性
方法
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它

11.3.2 焦点管理
document.activeElement 这个属性始终会引用DOM中当前获得了焦点的元素
document.hasFocus()方法，这个方法用于确定文档是否获得了焦点 返回true
element.focus() 使元素获得焦点

11.3.3 HTMLDocument的变化
document.readyState
就是通过它来实现一个指示文档已经加载完成的指示器
返回两个值：
loading，正在加载文档；
complete，已经加载完文档。

document.compatMode
在标准模式下，document.compatMode的值等于"CSS1Compat"，而在混杂模式下，document.compatMode的值等于"BackCompat"。

document.head 引用head元素
var head = document.head || document.getElementsByTagName("head")[0];

document.charset //字符集设置
document.defaultCharset //查看默认字符集

自定义数据属性
这些属性可以任意添加、随便命名，只要以data-开头即可

var div = document.getElementById("myDiv");
var appId = div.dataset.appid;
var myName = div.dataset.myname;

可以通过.dataset.属性名访问,注意chorme浏览器中.dataset返回的键值都是小写，即appID变成了appid

11.3.6 插入标记

innerHTML
读模式：只返回所有子节点的HTML标签
写模式：如果包含特殊字符，应该转义
注意：在大多数浏览器中，通过innerHTML插入