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”)){
//执行操作
}

未完待续！！！

最后

以上就是时尚金鱼为你收集整理的DOM 扩展 ：理解Selectors API、使用HTML5 DOM扩展、了解专有的DOM扩展的全部内容，希望文章能够帮你解决DOM 扩展 ：理解Selectors API、使用HTML5 DOM扩展、了解专有的DOM扩展所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。