$$(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 元素。
支持的 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 li\');
// -> ID为"contents"的元素下所有<li></li>标签。
$$(\'#contents a[rel]\');
// -> ID 为 "contents" 的元素下所有具有 rel 属性的链接。
$$(\'a[href="#"]\');
// -> 所有 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(也就是内容为空或者只有空白)