JavaScript DOM扩展——“选择符API和元素遍历”的注意要点

  • A+
所属分类:JavaScript

选择符API

Selector API Level1 的核心就是两个方法:querySelector()和querySelectorAll()。实际上,jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用。

querySelector()方法

该方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。如:

如上,如果传入了不被支持的选择符,该方法会抛出错误。

querySelectorAll()方法

该方法接收一个CSS选择符,返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。而其底层实现则类似于一组元素的快照,而非不断对文档进行搜索的动态查询。这样可以避免使用NodeLIst对象。能够调用该方法的类型包括Document、DocumentFragment和Element。如:

同样的,如果传入了浏览器不支持的选择符或者选择符中有语法错误,该方法会抛出错误。

matchesSelector()方法

这个方法接受一个参数,CSS选择符,如果调用元素与该选择符匹配,返回true,否则返回false。为了解决浏览器兼容问题,可以使用下面的包装函数:

元素遍历Element Traversal规范

对于元素间的空格,各浏览器会做出不同反应,就导致了在使用childNodes和firstChild等属性时的行为不一致。

由此,Element Traversal API 为DOM元素添加了以下5个属性:

  • childElementCount:子元素的个数(不包括文本节点和注释);
  • firstElementChild:第一个子元素;
  • lastElementChild:最后一个子元素;
  • previousElementSibling:前一个同辈元素;
  • nextElementSibling:后一个同辈元素;

如:

支持 Element Traversal 的浏览器有 IE9+、Firefox 3.5+、Safari 4+、Chrome 和 Opera 10+

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: