JS中的CSS选择器

在 2008 年以前，浏览器中大部分 DOM 扩展都是专有的。此后，W3C 将一些已经成为事实标准的专有扩展标准化并写入规范中。Selectors API 就是由 W3C 发布的一个事实标准，为浏览器实现原生的 CSS 选择器。

Selectors API Level 1（http://www.w3.org/TR/selectors-api/）的核心是两个方法：querySelector() 和 querySelectorAll()，在兼容浏览器中可以通过文档节点或元素节点调用。目前已完全支持 Selectors API Level 1 的浏览器有 IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和 Opera 10+。

Selectors API Level 2（http://www.w3.org/TR/selectors-api2/）规范为元素增加了 matchesSelector() 方法，这个方法接收一个 CSS 选择符参数，如果调用的元素与该选择符匹配，则返回 true；否则返回 false。目前，浏览器对其的支持不是很完善。

querySelector() 和 querySelectorAll() 方法的参数必须是符合 CSS 选择符语法规则的字符串，其中 querySelector() 返回一个匹配元素，querySelectorAll() 返回一个匹配集合。

示例1

新建网页文档，输入下面的 HTML 结构代码。

<div class="content">
    <ul>
        <li class="red">财经</li>
        <li class="blue">娱乐</li>
        <li class="red">时尚</li>
        <li class="blue">互联网</li>
    </ul>
</div>

如果要获得第 1 个 li 元素，可以使用以下方法。

document.querySelector(".content ul li");

如果要获得所有 li 元素，可以使用以下方法。

document.querySelectorAll(".content ul li");

如果要获得所有 class 为 red 的 li 元素，可以使用以下方法。

document.querySelectorAll("li.red");

DOM API 模块也包含 getElementsByClassName() 方法，使用该方法可以获取指定类名的元素。例如：

document.getElementsByClassName("red");

getElementsByClassName() 方法只能接收字符串，且为类名，而不需要加点号前缀，如果没有匹配到任何元素则返回空数组。

CSS 选择器是一个便捷的确定元素的方法，这是因为大家对 CSS 已经很熟悉了。当需要联合查询时，使用 querySelectorAll() 更加便利。

示例2

在文档中一些 li 元素的 class 名称是 red，另一些 class 名称是 blue，可以用 querySelectorAll() 方法一次性获得这两类节点。

var lis = document.querySelectorAll("li.red, li.blue");

如果不使用 querySelectorAll() 方法，那么要获得同样的列表，需要选择所有的 li 元素，然后通过迭代操作过滤出那些不需要的项目列表。

var result = [], lis1 = document.getElementsByTagName('li'), classname='';
for (var i = 0; len = lis1.length; i < len; i ++) {
    classname = lis1[i].className;
    if (classname === 'red' || classname === 'blue') {
        result.push (lis1[i]);
    }
}

比较上面两种不同的用法，使用选择器 querySelectorAll() 方法比使用 getElementsByClassName() 方法的性能要快得多。因此，如果浏览器支持 document.querySelectorAll()，那么最好使用它。