MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

使用选择器定位DOM元素

这篇翻译不完整。请帮忙从英语翻译这篇文章

Selectors API通过匹配一组选择器的方式来为从DOM中检索Element节点提供一些简单快捷的方法,这比过去必须要在javascript代码中用循环来查找某个你想要的特定元素更快一些。

NodeSelector接口

该规范对于使用Document,DocumentFragment和Element接口的对象都增了两种新方法:

querySelector
返回节点子树内与之相匹配的第一个Element节点。如果没有匹配的节点,则返回null。
querySelectorAll
返回一个包含节点子树内所有与之相匹配的Element节点列表,如果没有相匹配的,则返回一个空节点列表。
注意:由 querySelectorAll()返回的节点列表不是动态实时的。这和其他DOM查询方法返回动态实时节点列表不一样。

这里有更多的例子和细节:querySelector() and querySelectorAll() ,Code snippets for querySelector.

Selectors

选择器方法接受一个或多个用逗号分隔的选择器来确定需要被返回的元素。例如,要选择文档中所有CSS的类(class)是warning或者note的段落(p)元素,可以这样写:

var special = document.querySelectorAll( "p.warning, p.note" );

也可以通过ID来查询,例如:

var el = document.querySelector( "#main, #basic, #exclamation" );

执行上面的代码后,el就包含了文档中元素的ID是main,basic或exclamation的所有元素中的第一个元素。

querySelector() and querySelectorAll() 里可以使用任何CSS选择器。

另请参阅

文档标签和贡献者

 此页面的贡献者: ZhuYonglin, gavinkwoe, liurenxingyu
 最后编辑者: ZhuYonglin,