首页 > 编程笔记 > JavaScript笔记 > JS DOM

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(),那么最好使用它。

所有教程

优秀文章