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。