工具函数 $$ - Prototype JavaScript 框架

Xunxin Prototype API

$$

$$(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 标签的子元素(不包括子元素的子元素)。
  • 属性选择器:支持所有的属性操作,包括 ~=(匹配以空格分隔的属性值的其中一个或多个,像 relclass);^=(匹配属性值的开始部分);$= (匹配属性值的结尾部分);*=(匹配属性值的任意部分)。
  • :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(也就是内容为空或者只有空白)