第11章 DOM扩展

（一）

对DOM的两个主要的扩展是Selectors API（选择符API）和HTML5。

（二）

jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用，从而抛开了getElementById（）和getElementsByTagName（）。

（三）

Selector API Level 1的核心是两个方法：querySelector（）和querySelectorAll（）。querySelector（）接收一个CSS选择符，返回与该模式匹配的第一个元素，没找到返回null。

var selected = document.querySelector(".selected");//取得类为“selected”的第一个元素

querySelectorAll（）返回所有匹配的元素，返回的是一个NodeList的实例（但不会不断地对文档进行搜索和动态查询）。

（四）

对于元素间的空格，IE9之前的版本与其他浏览器的处理有差异，导致了在使用childNodes和firstChild等属性时的行为不一致。为了弥补差异又保持DOM规范不变，Element Traversal规范新定义了一组属性。firstElementChild等，不必担心空白文本节点。

firstElementChild见我的另一篇笔记：http://www.jianshu.com/writer#/notebooks/15702203/notes/17309252

（五）

HTML5为每个元素定义了classLlist属性，用于在元素中添加，移除及切换 CSS 类。该属性是 DOMTokenList 对象（一个只读的类数组对象），你可以通过DOMTokenList定义的方法对其进行修改。方法包括：add、remove、toggle（切换）、contains、item（索引）。

详情：https://segmentfault.com/a/1190000009067946

（六）

焦点管理：

document.activeElement属性会引用DOM中当前获得了焦点的元素（得到的值是INPUT、BUTTON这种）

document.hasFocus（）方法用于确定文档是否获得了焦点（返回true或false）。它们的用途是提高web应用的无障碍性。

（七）

HTML5扩展了HTMLDocument

1、readyState 属性返回当前文档的状态（载入中……）。

该属性返回以下值:

uninitialized - 还未开始载入

loading - 载入中

interactive - 已加载，文档与用户可以开始交互

complete - 载入完成

2、兼容模式，document.compatMode属性（鉴别标准模式、混杂模式）

如果文档处于“混杂模式”，则该属性值为"BackCompat"

如果文档处于“标准模式”或者“准标准模式(almost standards mode)”，则该属性为"CSS1Compat"

当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；

当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都包括在内，而不仅仅是body部分。

3、document.head属性引用文档的head元素。返回当前文档中的元素。如果有多个元素，则返回第一个。

（八）

插入标记

innerHTML属性（不要过多使用，影响性能）。

outerHTML属性会返回包括自身元素的代码。

insertAdjacentHTML（）方法，按位置插入HTML文本。