JavaScript 经典实例：第三版

处理

HTML

｜

311

12.6

使用

Selectors API

查找所有子元素

12.6.1

问题

你想列出父元素（例如

article

元素）中某种类型的所有子元素（例如

img

元

素），

但是不希望遍历整个元素集合。

12.6.2

方案

使用

Selectors API

，通过类似

CSS

的选择符获取

article

元素内部的

img

元

素。

const imgs = document.querySelectorAll('article img');

12.6.3

讨论

选择符查询

API

提供两个方法，一个是方案中使用的

querySelectorAll()

，另一

个是

querySelector()

。二者之间的区别是，

querySelectorAll()

返回符合选择符

条件的所有元素，而

querySelector()

只返回找到的第一个结果。

选择符句法源自

CSS

选择符句法，只不过这里不装饰选中的元素，而是返回选中的

元素。在上述示例中，返回的是所有位于

article

元素内部的

img

元素。如果想获

取所有

img

元素，不管在哪个父元素中，使用下述代码。

const

imgs = document.querySelectorAll('img');

在方案中，不管

img

元素是不是

article

元素的直接子节点，全部返回。这意味着，

如果

img

元素包含在

article

元素内部的一个

div

元素里，也纳入返回结果中。

<article>

<div>

<img

src="..." /

>

</div>

</article>

如果只想获取作为

article ...