如何使用for循环遍历childNodes?

How to use for loop through childNodes?

我需要在 div 内的每个节点上动态设置 z-index(第一个节点 - 1,第二个 - 2,等等)。当我尝试在子节点上使用 "for" 循环时,出现错误 "Uncaught TypeError: Cannot set property 'zIndex' of undefined"。你能指出我的错误吗?

可以看到代码笔:https://codepen.io/pen/

HTML + JS:

<div id="blog__images" class="blog__images">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>
    var images = document.getElementById('blog__images').childNodes;
for (var i = 1; i < images.length; ++i) {
    images[i].style.zIndex = i;
}

元素内部的空白被认为是文本,文本被认为是节点。应跳过这些文本节点。

var images = document.getElementById('blog__images').childNodes;
// console.log(images);
for (var i = 1; i < images.length; ++i) {
    if (images[i] && images[i].nodeType != 3) {
      console.log("My node:" + images[i].nodeName);
      images[i].style.zIndex = i;
     } else {
      console.log("Skipping Extra node:" + images[i].nodeName);
     }
}
<div id="blog__images" class="blog__images">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>

在循环中的每个元素上使用 .style 和迭代 i 设置 z-index。下面的例子在 snippit 中...

images[i].style.zIndex = i; 就可以了。我已经直接使用类名选择了元素,不需要 childNode...

您可以打开浏览器控制台并在 运行 代码后检查每个节点的 CSS 属性。

以下代码片段的控制台一次运行:

let images = document.getElementsByClassName('image');
let imgZIndex;
for(let i = 0; i < images.length; i++){
imgZIndex = images[i].style.zIndex = i;
console.log(imgZIndex)
}
<div id="blog__images" class="blog__images">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>

您可以像这样遍历结构。

var images = document.getElementById('blog__images').childNodes;
for (var img : images) {
    images[img].style.zIndex = img;
}