$$
$$(cssRule...) -> [HTMLElement...]
根据指定的 CSS 选择器,查找匹配的 DOM 元素,并按照元素在 HTML 文档中的顺序返回一个匹配的 DOM 节点集数组。参数可接收一个或多个 CSS 选择器(字符串)。
有时常用的 DOM 节点选择工具:被 $() 函数封装的
document.getElementById()
、getElementsByTagName()
以及 Prototype
独有的 getElementsByClassName()
扩展方法,均不能满足快速地查找元素和元素集合的要求。
如果你清楚 DOM 树结构,那么你可以方便地使用 CSS 选择器来完成这项工作。
快速入门样例
$$('div');
// -> 文档中所有的 DIV 元素集合。等同于 document.getElementsByTagName('div')!
$$('#contents');
// -> 等同于 $('contents'),不过它返回一个数组。
$$('li.faux');
// -> 所有 Class='faux' 的 LI 元素。
$$
函数搜索整个文档,在文档的指定区域中使用选择器查询子元素,请使用
Element#getElementsBySelector。
支持的 CSS 语法
$$
函数不依赖于浏览器内部的 CSS 解析器(否则,会遭遇跨浏览器方面的问题),
因此,它能够在所有支持的浏览器上提供完全一致的 CSS 选择器语法规则。
v1.5.0 支持
- 类型选择器:标签名称,例如
div
。 - 后代选择器:使用空格分隔两个选择器,以标识元素的层次关系,例如
#a li
。 - 属性选择器:完整的 CSS 2.1 规范支持,如
[attr]
,[attr=value]
,[attr~=value]
以及[attr|=value]
。另外还支持[attr!=value]
。如果你需要匹配的值中包含空格,请在值两端加上引号。如[title="Hello World"]
。 - 类选择器:CSS 类名,如
.highlighted
或.example.wrong
。 - ID 选择器:如
#item1
。
v1.5.1 支持
CSS3 规范中,除一些伪对象
(pseudo-elements,如 ::first-letter
)外,其余的都已被支持。能够在 1.5.1 中使用的新选择器样例如下:
-
子选择器:选择所有匹配的子元素,如
#a > li
。
译注:注意和后代选择器的区别。如#a li
选择 ID 为 'a' 的元素下,所有具有 li 标签的元素(包括子元素,子元素的子元素等)。#a > li
仅选择 ID 为 'a' 的元素下,具有 li 标签的子元素(不包括子元素的子元素)。 -
属性选择器:支持所有的属性操作,包括
~=
(匹配以空格分隔的属性值的其中一个或多个,像rel
或class
);^=
(匹配属性值的开始部分);$=
(匹配属性值的结尾部分);*=
(匹配属性值的任意部分)。 :not
伪类(pseudo-class),如#a *:not(li)
(匹配#a
中所有不具有 LI 标签的后代元素)。-
:nth
、:first
、:last
伪类,例tr:nth-child(even)
(匹配所有符合 even 的表格行。译注:伪类: nth-child() 的参数是an+b,其中 an 代表倍数,如 2n, -3n, 5n等,a 可以取负值;b 代表数字序号,如 1, 2, -3,b 也可取负值。an+b 指定了要匹配的节点在当前节点集中的位置, 如 tr:nth-child(2n){background-color:red;}:将偶数行的表格背景色设为红色。 tr:nth-child(3):匹配第三行。 tr:nth-child(2n+1):区配奇数行。详见 CSS3 规范),li:first-child
(匹配所有 LI 元素下的第一个字元素),p:nth-last-of-type(3)
(匹配页面中的倒数第三段。 译注:注意,是兄弟,同级别的节点)。 :empty
伪类(选择没有子元素及文本内容的节点)。:enabled
、:disabled
、:checked
伪类(用于表单控件)。
样例
$$('#contents a[rel]');
// -> ID 为 "contents" 的元素下所有具有 rel 属性的链接
$$('a[]');
// -> 所有 href 属性值等于 "#" 的链接
$$('#navbar a', '#sidebar a');
// -> 所有位于 ID 等于 "navbar" 或 "sidebar" 元素下链接
在 v1.5.1 及以上版本中,支持多种高级选择器组合使用:
$$('a:not([rel~=nofollow])');
// -> 所有 rel 属性中不包括单词 "nofollow" 的链接
$$('table tbody > tr:nth-child(even)');
// -> 表格的 tbody 中所有符合 even 条件的行
$$('div:empty');
// -> 所有不包含内容的 DIV(也就是内容为空或者只有空白)