遍历 getElementsByClassName 节点列表的子元素。无法正常工作

Question

我有一个网页，其中包含一系列动态呈现的图像，我想定位这些图像并使用脚本更改它们的 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" ，那也不起作用.

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

Answer 1

您可以使用 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>

遍历 getElementsByClassName 节点列表的子元素。无法正常工作

Looping through child elements of getElementsByClassName nodelist. Can't get it to work properly

javascript

loops

for-loop

foreach

nodelist