Question

使用 for 循环将子 div 附加到每个 div

2015-04-13

7748

javascript html

我想将子 div 附加到每个给定的父 div。子 div 应该通过调用 decorateDiv() 进行装饰。

例如，执行 appendChildren 后，以下 div 应采用以下形式（假设 decorateDiv 不执行任何操作）

function appendChildren() 
{
var allDivs = document.getElementsByTagName("div");

for (var i = 0; i < allDivs.length; i++) 
  {
   var newDiv = document.createElement("div");
   decorateDiv(newDiv);
   allDivs[i].appendChild(newDiv);
  }
}

// Mock of decorateDiv function for testing purposes
function decorateDiv(div) {}

我做错了什么？

Answer 1

您发现 .getElementsByTagName() 返回了一个实时 NodeList。这意味着，您添加到页面的新 <div> 元素会在您这样做后立即成为列表的一部分。

您可以做的是预先将该 NodeList 转换为普通数组：

var allDivs = document.getElementsByTagName("div");
allDivs = [].slice.call(allDivs, 0);

现在，在循环中使用“allDivs”只会将您的新元素附加到您最初寻找它们时存在的元素中。

Answer 2

在 condition 字段中使用 allDivs.length 将在每次循环迭代时访问 length 属性。因此，在函数外部为 length 声明一个变量，并在 condition 字段中指定变量名称。

function appendChildren() 
{
var allDivs = document.getElementsByTagName("div");
var len = allDivs.length;

for (var i = 0; i < len ; i++) 
  {
   var newDiv = document.createElement("div");
   decorateDiv(newDiv);
   allDivs[i].appendChild(newDiv);
  }
}

// Mock of decorateDiv function for testing purposes
function decorateDiv(div) {}

Answer 3

getElementsByTagName 返回 实时 NodeList ，每添加一个新 div，其长度就会增加。

要么使用 document.querySelectorAll() ，它 不是实时 NodeList 。

let allDivs = document.querySelectorAll("div");

或者将实时 NodeList 转换为数组。使用 ES6 [...spread] 运算符，这真的很简单。

let allDivs = [...document.getElementsByTagName("div")];