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

Question

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

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以后无法再访问或引用，即（图片无法访问）;

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为null的元素不存在，则此方法不会返回image-list-view值。

＆＃13;

＆＃13;

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

＆＃13;

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

ul {
  display: none
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

资源

• document.querySelectorAll()

    

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