$$

$$(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 支持

v1.5.1 支持

CSS3 规范中,除一些伪对象 (pseudo-elements,如 ::first-letter)外,其余的都已被支持。能够在 1.5.1 中使用的新选择器样例如下:

样例

$$('#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(也就是内容为空或者只有空白)