DOM拓展
DOM两个主要的拓展是Selectors API和HTML5。
选择符API
jQuery核心：通过CSS选择符查询DOM文档取得元素的引用，从而抛开了getElementById()和getElementByTagName()。
SelectorsAPI Lecel 1 的核心是两个方法：
- querySelectorAll()
- querySelector()
querySelector()方法
接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
querySelectorAll()方法
返回一个NodeList的实例。
取得NodeList中的每一个元素，可以使用item()方法，也可以使用方括号法。
var i ,len,strong;
for (i=0,len=strongs.length;i<len;i++){
strong = strongs[i]; //或者strongs.item(i)
strong.className = "important";
}
matchesSelector()方法
SelectorsAPI Lecel 2 规范为Element类型新增的一个方法。接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。
福利：
IE9+通过msMatchesSelector()支持该方法
Firefox3.6+通过mozMatchesSelector()支持该方法。
Safari5+和Chrome通过webkitMatchesSelector()支持该方法。
封装一个方法实现兼容：
function matchesSelector(element,selector) {
if (element.matchesSelector){
return element.matchesSelector(selector);
} else if (element.msMatchesSelector) {
return element.msMatchesSelector(selector);
} else if (element.mozMatchesSelector) {
return element.mozMatchesSelector(selector);
} else if (element.webkitMatchesSelector) {
return element.webkitMatchesSelector(selector);
} else {
throw new Error("Not supported.");
}
}
元素遍历
为了弥补IE9之前的版本不会返回文本节点的问题。
Element Traversal API 为DOM元素添加了以下5个属性：
- childElementCount：返回子元素（不包括文本节点和注释）的个数。
- firstElementChild：指向第一个子元素；firstChild的元素版。
- lastElementChild：指向最后一个子元素；lastChild的元素版。
- previousElementSibling：指向前一个同辈元素；previousSibling的元素版。
- nextElementSibling：指向后一个同辈元素；nextSibling的元素版。
HTML5
HTML5规范围绕如何使用新增标记定义了大量JavaScript API。
与类相关的扩充
- getElementsByClassName()方法
- classList属性（在操作类名时，需要通过className属性添加、删除和替换类名。）
classList属性是新集合类型DOMTokenList的实例。
新类型有length属性，通过item()或方括号法取得每个元素。有如下方法：
- add(value)：将给定的字符串值添加到列表中。如果值已经存在了，就不添加了。
- contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
- remove(value)：从列表中删除给定的字符串。
- toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
焦点管理
HTML5也添加了辅助管理DOM焦点的功能。
document.activeElement属性：这个属性始终会引用DOM中当前获得了焦点的元素。
获得焦点的方式：
- 页面加载
- 用户输入（通常是通过按Tab键）
- 在代码中调用focus()方法
document.hasFocus()方法：确定文档是否获得了焦点。
HTMLDocument的变化
- readyState属性：loading（正在加载文档）和complete（已经加载完文档）。是document的属性。
- 兼容模式：document的compatMode属性。标准模式的值：“CSS1Compat”，混杂模式的值：“BackCompat”。
- head属性：document.head属性。
字符集属性
charset属性：表示文档中实际使用的字符集，也可以用来指定新字符集。
document.charset
自定义数据属性
加上前缀data-。
插入标记
- innerHTML属性：读模式：返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记。写模式：会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
不支持innerHTML属性的元素：
<col>、<colgroup>、<frameset>、<head>、<html>、
<style>、<table>、<tbody>、<thead>、<tfoot>和<tr>。
- outerHTML属性
读模式：返回调用它的元素及所有子节点的HTML标签。
写模式：会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。 - insertAdjacentHTML()方法
参数：插入位置和插入的HTML文本。
第一个参数必须是下列值之一：
“beforebegin”：在当前元素之前插入一个紧邻的同辈元素。
“afterbegin”：在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素。
“beforeend”：在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素。
“afterend”：在当前元素之后插入一个紧邻的同辈元素。 - 内存与性能问题
使用上面提到的那些方法替换子节点可能会导致浏览器的内存占用问题。
愿因：可能删除带有事件处理程序或引用了其他JavaScript对象子树。
scrollIntoView()方法
可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。
专有拓展
一些只有少数浏览器实现的标准
文档模式
知道页面采用的是什么文档模式，有助于理解页面的行为方式。
children属性
这个属性是HTMLCollection的实例，只包含元素中同样还是元素的子节点。
contains()方法
用来得知某个节点是不是另一个节点的后台。
一个通用的contains()函数：
function contains(refNode, otherNode) {
if (typeof refNode.contains == "function" &&
(!client.engine.webkit || client.engine,webkit >= 522)) {
return refNode.contains(otherNode);
} else if (typeof refNode.compareDocumentPosition == "function") {
return !!(refNode.compareDocumentPosition(otherNode) & 16);
} else {
var node = otherNode.parentNode;
do {
if (node === refNode) {
return true;
} else {
node = node.parentNode;
}
} while(node !== null);
return false;
}
}
插入文本
两个没有被HTML5看中的属性：innerText和outerText。
滚动
- scrollIntoViewIfNeeded(alignCenter)
- scrollByLines(lineCount)
- scrollByPages(pageCount)