Element.getElementsBySelector - Prototype JavaScript 框架

getElementsBySelector(element, selector...) -> [HTMLElement...]

根据一个或多个指定的 CSS 选择器（字符串），在 element 中查找匹配其中任何一个选择器的后代节点， 并返回一个数组，数组中的元素已经过 扩展。

在 Prototype 1.6 中，不推荐使用 Element#getElementsBySelector 方法，建议使用更简洁的 Element#select。

这个方法类似于 $$()，但是它可以在一个元素的上下文中使用，而不是针对整篇文档。 它们支持的 CSS 语法相同，具体的细节请参考 $$() 的文档。

样例

<ul id="fruits">
	<li id="apples">
		<h3 title="yummy!">Apples</h3>
		<ul id="list-of-apples">
			<li id="golden-delicious" title="yummy!">Golden Delicious</li>
			<li id="mutsu" title="yummy!">Mutsu</li>
			<li id="mcintosh">McIntosh</li>
			<li id="ida-red">Ida Red</li>
		</ul>
		<p id="saying">An apple a day keeps the doctor away.</p>
	</li>
</ul>

$('apples').getElementsBySelector('[title="yummy!"]');
// -> [h3, li#golden-delicious, li#mutsu]
$('apples').getElementsBySelector('p#saying', 'li[title="yummy!"]');
// -> [li#golden-delicious, li#mutsu, p#saying]
$('apples').getElementsBySelector('[title="disgusting!"]');
// -> []

小提示

Element#getElementsBySelector 可以作为 getElementsByTagName 的一个友好的替代版本：

var nodes = $A(someUL.getElementsByTagName('li')).map(Element.extend);
var nodes2 = someUL.getElementsBySelector('li');

在第一行代码中，必须显式地转换结果集为 Array（以便于 Prototype Enumerable 的方法使用），并且需要在每个节点上手动调用 Element.extend（以便于节点可以使用扩展的 DOM 方法）。Element#getElementsBySelector 则不用担心这些问题。

如果你使用 1.5.1 或以上的版本（在这些版本中优化了执行效率），上述两行代码运行时的速度差别可以忽略不计。