如何通过childNodes使用for循环？

Posted 2023-02-25

【中文标题】如何通过childNodes使用for循环？

【英文标题】：How to use for loop through childNodes?

【发布时间】：2020-06-10 01:41:18

【问题描述】：

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

你可以看到codepen：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;

【问题讨论】：

childNodes 包括元素之间的（空）文本节点。请改用.children。

而且仅供参考，console.log(images[i]) 会立即揭示这个问题

for (const child of node.childNodes) child.style.zIndex = ... 比使用数字索引i 更容易读/写。阅读更多关于for..of syntax

【参考方案1】：

元素内部的空白被视为文本，文本被视为节点。应该跳过那些文本节点。

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>

【参考方案2】：

使用.style 和i 对循环中的每个元素的迭代设置z-index。下面的示例在代码片段中...

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>

【参考方案3】：

你可以像这样循环结构。

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