javascript之DOM选择符

Posted 2020-10-05 生如夏花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选择符(引用自疯狂的兔子的博客)