生如夏花2017

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

javascript库中最常用的一项功能,就是根据CSS选择符选择与某个模式匹配的DOM元素。实际上jQuery的核心就是通过css选择符查询DOM文档取得元素的引用,从而抛开了getElementById()和getElementByTagName()

Selectors API就是有W3C发起的一个标准,致力于让浏览器原生支持CSS查询。

Selectors API 的核心两个方法:querySelector()和querySelectorAll().在兼容的浏览器中可以通过Document及Element类型的实例调用它们。

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

var body=document.querySelector("body");
      alert(body.nodeName);//BODY

querySelectorAll()方法接收的参数与querySelector()方法一样,都是一个CSS选择符,但返回的是所有匹配的元素而不仅仅是一个元素。该方法返回一个NodeList的实例。返回的值实际上是带有所有属性和方法的NodeList,其底层实现则类似与一组元素的快照,而不是对文档进行搜索的动态查询。

要取得NodeList中的每一个元素,可以使用item()方法,也可以使用方括号语法。

matchesSelector()方法

Selector API Level2为ELement类型新增了一个方法matchesSelector()。这个方法接收一个参数,即CSS选择符,如果调用元素与该选择符匹配,则返回true,否则返回false。


CSS选择符(引用自疯狂的兔子的博客)

posted on 2017-09-02 11:35  生如夏花2017  阅读(260)  评论(0编辑  收藏  举报