DOM 扩展 ：理解Selectors API、使用HTML5 DOM扩展、了解专有的DOM扩展

尽管DOM作为API已经非常完善了，但是为了实现更多的功能，仍然会有一些标准的或者是专有的扩展。

对DOM的两个主要的扩展是Selectors API（选择符API）和HTML5。除了前述两个主要的扩展外，还有Element Traversal（元素遍历）规范以及DOM的专有扩展。

jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用，从而产生查询DOM文档的原生方法：getElementById()和getElementByTagName()。

Selectors API是由W3C发起制定的一个标准，致力于让浏览器原生支持CSS查询。

Selectors API Level 1的两个核心方法是：querySelector()和querySelectorAll()，相对于原生的getElementById()和getElementByTagName()方法，解析和树查询操作可以在浏览器内部通过编译后的代码来完成，极大地改善了性能。

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

（Document类型）

document.querySelector（）在文档元素的范围内查找匹配的元素。

（Element类型）

element.querySelector（）在该元素后代元素的范围内查找匹配的元素。

（Document/DocumentFragment/Element）类型的实例调用querySelectorsAll（接收一个CSS选择符），返回的是所有匹配的元素而不是仅仅一个元素，该方法返回的是一个NodeList的实例（使用item()和[]语法访问NodeList中的每一个元素）。

Selector API Level 2规范

Element实例方法：matchesSelector（接收一个CSS选择符），如果调用元素与该选择符匹配，返回true；否则，返回false。

因为不同的的浏览器版本支持不同版本的matchesSelector方法，所以最好写一个包装函数，如果想使用这个方法的话。

“`

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.”);

}

}

if (matchesSelector(document.body,”body.page1”)){

//执行操作

}

未完待续！！！