如何在javascript中的'ul'中获取标签'li'的子元素

Question

当获取ul中的列表元素时，我们使用类名或标签获取元素，并以数组形式返回

var targetImages = document.getElementById("image-list-view").getElementsByTagName("img");

我需要获取此列表中的元素图像，而且我似乎在堆栈中

<ul id="image-list-view">
    <li>
        <a href="#"  data-gallery>
            <img src="images/pic1.jpg"/>
        </a>
    </li>
    <li>
        <a href="#"  data-gallery>
            <img src="images/pic2.jpg"/>
        </a>
    </li> 
</ul>

编辑

抱歉，我没有解释代码的问题。

该代码在站点启动时工作正常，但targetImages无法再访问或引用targetImages （即无法访问图像）；

Answer 1

您的代码有效，您只需要遍历结果并对图像进行处理。

getElementsByTagName返回一个HTMLCollection ，它几乎就像一个数组。 你可以用同样的方式遍历它。

 var targetImages = document.getElementById("image-list-view").getElementsByTagName("img"); for (var i = 0; i < targetImages.length; i++) { console.log(targetImages[i]); }

 I need to get the element image in this list and i seem to be stack <ul id="image-list-view"> <li> <a href="#" data-gallery> <img src="images/pic1.jpg" /> </a> </li> <li> <a href="#" data-gallery> <img src="images/pic2.jpg" /> </a> </li> </ul>

Answer 2

使用函数querySelectorAll和这个选择器ul#image-list-view li img 。

这种方法允许您直接获取图像元素并避免第二个函数执行。 此外，如果具有 id image-list-view的元素不存在，则此方法不会返回null值。

 var targetImages = document.querySelectorAll("ul#image-list-view li img"); console.log("Count of images: " + targetImages.length);

 .as-console-wrapper { max-height: 100% !important; top: 0; } ul { display: none }

 <ul id="image-list-view"> <li> <a href="#" data-gallery> <img src="images/pic1.jpg" /> </a> </li> <li> <a href="#" data-gallery> <img src="images/pic2.jpg" /> </a> </li> </ul>

资源

• document.querySelectorAll()

  返回文档中与指定选择器组匹配的元素列表（使用文档节点的深度优先预序遍历）。 返回的对象是一个 NodeList。