循环遍历 getElementsByClassName 节点列表的子元素无法让它正常工作

问题描述

我有一个包含一系列动态渲染图像的网页，我想根据其他一些逻辑将这些图像定位并使用脚本更改它们的 src 属性。我无法访问它们的特定标记，但将每个标记都包装在一个类名为“siteavatar”的 div 元素中。

我正在尝试遍历每个 .siteavatar 元素，然后定位它们的子图像元素。

我已将以下代码放置在页脚底部，就在结束正文标记之前（因此在 DOM 时间轴中的放置应该不是问题）：

    <script>
   
    window.onload = function() {
        var siteAvatars = document.getElementsByClassName("siteavatar");
      console.log(siteAvatars);
     
      siteAvatars.forEach(function(siteAvatar){
          console.log(siteAvatar.querySelector(".avatar"));
      });
    }
    
</script>

控制台将成功记录 siteAvatars 变量，但我所做的任何事情都无法让它识别循环。我尝试了多种不同的方法，例如 siteAvatar.children 等。

我也尝试了更常规的 for 循环，但没有成功：

<script>

window.onload = function() {
    var siteAvatars = document.getElementsByClassName("siteavatar");
   
   for (var i = 0; i < siteAvatars.length; i++) {
       console.log(siteAvatars[i].children)
   }
  console.log(siteAvatars);
}

问题似乎在通过 siteAvatars 节点列表本身循环；如果我将 console.log 切换到 siteAvatars[i].style.display = "none" / siteAvatar.style.display = "none" ，那也不起作用。

在我看来，我遗漏了一些明显的东西，这超出了我的故障排除范围。关于它可能是什么的任何想法？非常感谢！

解决方法

您可以使用 for 循环来完成此操作。使用 querySelector 获取子元素。

window.onload = function() {
  var siteAvatars = document.getElementsByClassName("siteavatar");
  var numSiteAvatars = siteAvatars.length;
  for (var i = 0; i < numSiteAvatars; i++) {
    var sa = siteAvatars[i];
    var a = sa.querySelector(".avatar");
    console.log(a);
  }
}

<div class="siteavatar">
  <img src="" class="avatar" />
</div>
<div class="siteavatar">
  <img src="" class="avatar" />
</div>

for-loop foreach javascript loops