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

Question

我有一个网页，里面有一系列动态渲染的图像，我想以它们为目标，并根据其他逻辑用脚本更改它们的src属性。我无法访问它们的特定标记，但将每个标记封装在一个div元素中，该元素的类名为"；siteavatar"；。

我试图循环浏览每个.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);
}

问题似乎是通过网站Avatars节点列表本身循环；如果我将console.log切换到siteAvatars[I].style.display＝"；none"/siteAvatar.style.display="；无"，这也不起作用。

在我看来，我显然遗漏了一些超出我正在进行故障排除范围的东西。有什么想法吗？非常感谢！

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>