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

我想将子div附加到每个给定的父div。应该通过调用decorateDiv（）来修饰的子div

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) {}

例如，在执行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) {}

函数appendChildren（）
{
var allDivs=document.getElementsByTagName（“div”）；
对于（var i=0；i

---

我做错了什么？

您遇到了一个事实，即

.getElementsByTagName（）

返回一个live节点列表。这意味着您要添加到页面中的新

元素一经添加就成为列表的一部分

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) {}

您可以做的是预先将节点列表转换为普通数组：

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) {}

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

---

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

每次循环迭代时，使用

条件

字段中的

allDivs.length

将访问

length

属性。因此，在函数外部为

长度

声明一个变量，并在

条件

字段中指定变量名称

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) {}

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) {}

函数appendChildren（）
{
var allDivs=document.getElementsByTagName（“div”）；
var len=所有divs.length；
对于（变量i=0；i

getElementsByTagName

返回Live

NodeList

，这会使每添加一个新div的长度不断增加

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) {}

使用

document.querySelectorAll（）

，它不是活动的

节点列表

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) {}

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

或者将活动节点列表转换为数组。使用ES6[…spread]操作符非常简单

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) {}

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

您可能希望返回修饰的div，如
newDiv=decorateDiv（newDiv）
然后在
decorateDiv（）
方法return
newDiv
中，他不需要这样做，元素是活动节点。在decorateDiv中所做的修改将应用于元素，即使它没有返回。很好的发现。这就解释了为什么我测试代码时chrome崩溃了，这是一个递归循环……对。出于良好的实践，我总是缓存长度，这样就不必每次都重新计算长度。这很棘手。是否有其他“getElementBy”或QSA有相同的交易？有“实时”列表吗？