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

未完待续!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值