javascript - 在javascript中访问一个html节点

Question

我有以下 html 代码。

<div id="polaroid">
    <figure>
        <img src="assets/polaroid01.jpg" width="200" height="200" alt="Red mushroom" />
        <figcaption>Pretty red mushroom</figcaption>
    </figure>
    <figure>
        <img src="assets/polaroid02.jpg" width="200" height="200" alt="Rainbow near Keswick" />
        <figcaption>Rainbow near Keswick</figcaption>
   </figure>
   <figure>
        <img src="assets/polaroid03.jpg" width="200" height="200" alt="An old tree" />
        <figcaption>Nice old tree</figcaption>
   </figure>
</div><!--end polaroid-->

在此我想将所有图像标签存储在一个数组中。我知道，我可以像这样访问图形标签。

var images= document.getElementById('gall').getElementsByTagName('figure'); 

但我不知道如何访问图片标签。我试过了。

document.getElementById('gall').getElementsByTagName('figure').getElementsByTagName('img'); 

但这行不通。

Answer 1

在这种情况下使用querySelectorAll 更方便:

var images = document.querySelectorAll('#gall figure img');