DOM扩展之Selectors API

时间:2023-03-10 02:47:17
DOM扩展之Selectors API

jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用,从而抛开了getElementById()和getElementsByTagName()。

Selectors API致力于让浏览器原生支持CSS查询。

11.1.1 querySelector()方法

接收一个css选择器,返回与该模式匹配的第一个元素。如果没有找到匹配的元素,返回null。

通过document对象调用该方法,会在文档元素范围内查找匹配的元素。而通过Element类型调用querySelector()方法时,则是在其后代元素范围内查找匹配的元素。

11.1.2 querySelectorAll()方法

querySelectorAll()方法接收的参数与querySelector一样,只是返回所有匹配的元素。返回值是一个NodeList的实例。返回的值实际上是带有所有属性和方法的NodeList,并不是live的。

11.1.3 matchesSelector()方法

Selectors API Level 2规范为Element类型新定义了这个方法。即只有Element元素才有这个方法。这个方法接收一个CSS选择符作为参数,如果调用该元素的与该选择符匹配,返回true;否则返回false。

该方法相当于jQuery的is()函数。

querySelector 和 querySelectorAll()方法的css选择器是绝对的!不相对于任何元素,甚至不会相对于调用它们的元素。 首先匹配查询条件,得到的元素再匹配子元素。

eg:

<img id="outside">
<div id="my-id">
  <img id="inside">
  <div class="lonely"></div>
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>

document.querySelector('#my-id').querySelectorAll('div div'); 得到的是 div.lonely div.outer div.inner,因为这些元素都满足 div div的查询条件,并且它们都是 my-div的子元素。

document.querySelectorAll('#my-id div div'); 得到的是 div.inner。