访问 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');

Answer 2

你的意思是这样的：

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

Answer 3

如果您使用 JQuery，这是可能的。只需这样做。

包括 Jquery 库（任何版本）。
select 图片：$("#polaroid img").(任意动作);

示例：

把这个放在你的代码上面：

<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    
$(document).ready(function() { 

$("#polaroid img").css("border", "1px solid #000000");

});

</script>

访问 javascript 中的 html 节点

Access an html node in javascript

html

javascript

tags