《JavaScript高级程序设计》—— DOM拓展
（1） 选择符API
1. querySelector()方法
querySelector()方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null。
// 获取id为Div的元素 var div = document.querySelector( '#div' ); // 获取class为myImg的元素 var myImg = document.querySelector( '.myImg' );
通过 Document 类型调用 querySelector()方法时，会在文档元素的范围内查找匹配的元素。
通过 Element 类型调用 querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。
2. querySelectorAll()方法
querySelectorAll()方法接收的参数与 querySelector()方法一样，都是一个 CSS 选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个 NodeList 的实例。
// 取得id名为div下面所有的li var lists = document.getElementById( 'div' ).querySelectorAll( 'li' );
3. matchesSelector()方法
Selectors API Level 2 规范为 Element 类型新增了一个方法 matchesSelector()。这个方法接收一个参数，即 CSS 选择符，如果调用元素与该选择符匹配，返回 true；否则，返回 false。
（2） HTML5
1. getElementsByClassName()方法
getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList。传入多个类名时，类名的先后顺序不重要。
//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓 var allCurrentUsernames = document.getElementsByClassName("username current"); //取得 ID 为"myDiv"的元素中带有类名"selected"的所有元素 var selected = document.getElementById("myDiv").getElementsByClassName("selected");
2. classList 属性
HTML5 新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加classList 属性。这个 classList 属性是新集合类型 DOMTokenList 的实例。与其他 DOM 集合类似，
DOMTokenList 有一个表示自己包含多少元素的 length 属性，而要取得每个元素可以使用 item()方
法，也可以使用方括号语法。此外，这个新类型还定义如下方法。
① add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
② contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
③ remove(value)：从列表中删除给定的字符串。
④ toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
//删除"disabled"类 div.classList.remove("disabled"); //添加"current"类 div.classList.add("current"); //切换"user"类 div.classList.toggle("user");
有了 classList 属性，除非你需要全部删除所有类名，或者完全重写元素的 class 属性，否则也就用不到 className 属性了。
3. 焦点管理
HTML5 也添加了辅助管理 DOM 焦点的功能。首先就是 document.activeElement 属性，这个属性始终会引用 DOM 中当前获得了焦点的元素。元素获得焦点的方式有页面加载、用户输入（通常是通过按 Tab 键）和在代码中调用 focus()方法。
另外就是新增了 document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互。
4. 自定义数据属性
HTML5 规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data-开头即可。
5. 插入标记
① innerHTML 属性
在读模式下， innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。在写模式下， innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。
6. scrollIntoView()方法
如何滚动页面也是 DOM 规范没有解决的一个问题。为了解决这个问题，浏览器实现了一些方法，以方便开发人员更好地控制页面滚动。在各种专有方法中， HTML5 最终选择了 scrollIntoView()作为标准方法。
scrollIntoView()可以在所有 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入 true 作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入 false 作为参数，调用元素会尽可能全部出现在视口中，（可能的话，调用元素的底部会与视口顶部平齐。）不过顶部不一定平齐 。
7. children属性
由于 IE9 之前的版本与其他浏览器在处理文本节点中的空白符时有差异，因此就出现了 children属性。这个属性是 HTMLCollection 的实例，只包含元素中同样还是元素的子节点。除此之外，children 属性与 childNodes 没有
什么区别，即在元素只包含元素子节点时，这两个属性的值相同。
8. contains()方法
在实际开发中，经常需要知道某个节点是不是另一个节点的后代。
这个方法接收一个参数，即要检测的后代节点。如果被检测的节点是后代节点，该方法返回 true；否则，返回 false。
