本文共 2764 字，大约阅读时间需要 9 分钟。
对DOM的扩展目前主要有两个，一个是Selectors API(选择符API)，另一个是HTML5. 这个是通过CSS选择符选择与特定模式匹配的DOM元素，主要代表是jQuery。Selector API Level1的核心是两个方法：querySelector()和querySelectorAll().在兼容的浏览器中，可以通过Document和Element类型来调用它们。
querySelector()方法，参数为一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配元素返回null。使用document对象调用这个方法的时候，会在全文档内进行匹配。当使用element对象调用这个方法时，只在element的后代元素内查找匹配。
querySelectorAll()方法，接收参数同querySelector（）一样，返回一个NodeList的实例。
matchesSelector()方法，这个方法接受一个参数，CSS选择符，如果调用元素与该选择符匹配，返回true，否则返回false。为了解决浏览器兼容问题，可以使用下面的包装函数：
function matchesSelector(element,selector){
if(element.matchSelector){
return element.matchesSelector(selector);
}else if(element.msMatchesSelector){//IE
return element.msMatchesSelector(selector);
}else if(element.mozMatchesSelector){//FireFox
return element.mozMatchesSelector(selector);
}else if(element.webkitMatchesSelector){//safari,chorme
return element.webkitMatchesSelector(selector);
throw new Error("No supportted!");
为了解决一些浏览器兼容问题，Element Traversal API为DOM元素添加了5个属性。
childElementCount:返回子元素的个数
firstElementChild:返回第一个子元素
lastElementChild:返回最后一个子元素
previousElementSibling:返回前一个同辈元素
nextElementSibling:指向后一个同辈元素
HTML规则围绕如何使用新增标记定义了大量的js API，其中一些api与DOM重叠，定义了浏览器应该支持的DOM扩展。
getElementsByClassName() ,接收一个参数，参数为一个包含一个或者多个的类名，返回的结果就是带有指定类的所有元素的NodeList。传入多个类名的时候，类名的先后顺序不重要。它与document.getElementsByTagName有类似的效果。
使用这个属性的一些方法可以简化class属性的操作，例如：
add(value):将新的添加进去，已存在就不添加
contains(value)是否存在value，存在true，不存在false
toggle（value）：如果存在，删除它，如果不存在，添加它
document.activeElement属性在HTML5中始终代表当前焦点指向的元素。
另外，新增的document.hasFocus()用于确定文档是否获取了焦点。
readyState: loading：表示正在加载 complete：表示完成
使用方式： if(document.readyState=="complete"){ // 执行操作 }
页面采用标准模式的情况下 document.compatMode="CSS1Compat"
页面采用混杂模式的情况下 document.compatMode==“BackCompat”
引入新的属性引用html的head部分：document.head
var head=document.head||document.getElementsByTagName("head")[0];
document.charset//文档实际使用的字符集
document.defaultCharset//文档的默认字符集
HTML5可以为元素添加非标准属性，但要添加前缀data-
<div id="mydiv" data-appId="12345" data-myname="Nicholas"/>
var div=document.getElementById("mydiv");
var appId=div.dataset.appId;
var myname=div.dataset.myname;
alert(div.dataset.appId);
由于innerHTML的支持各个浏览器相同，因此在往innerHTML中插入文本的时候要预先做一下检查。
在读模式下，outerHTML属性返回调用它的元素以及所有子节点的HTML标签；写模式下，根据指定的HTML字符串创建新的DOM子树，然后这个DOM子树完全替换调用元素。
insertAdjecentHTML()，接收两个参数，插入位置和要插入的HTML文本。第一参数必须为下列值之一：
beforebegin,afterbegin,beforeend,afterend.第二个参数是一个HTML字符串。
效率上来说，这些方式比js的DOM操作效率高，但是需要注意的是太频繁的操作会带来性能上的损失。
scrollIntoView()，屏幕滚动，如果参数设为true，或者不设，则调用元素的顶部与视口平齐；设为false则尽可能的全部出现在视口中。
document.forms[0].scrollIntoView();
另外还有一些其他的扩展，但是这些扩展都是为了弥补一些缺陷设立的，但是还没有纳入到一些公认的规范当中。
转载地址：http://jbvdi.baihongyu.com/