JavaScript for循环行为异常求助：遍历<ul>子元素时循环次数不符

这个问题其实是DOM操作里很常见的「动态集合陷阱」，我来给你拆解清楚：

问题根源 #

你每次执行docs.appendChild(docNodes.children[i])时，目标<li>元素会被从原<ul>（docNodes）中移除——因为DOM节点是唯一的，不能同时存在于两个父元素下。这就导致docNodes.children这个集合的长度会在每次循环后自动减1。

咱们一步步看初始长度为5的情况：

• 第1次循环（i=0）：移走第0个<li>，docNodes.children长度变为4
• 第2次循环（i=1）：移走当前的第1个<li>（原第2个），长度变为3
• 第3次循环（i=2）：移走当前的第2个<li>（原第4个），长度变为2
• 此时i=2，已经不满足i < 2的循环条件，循环直接终止，所以只执行了3次

另外提一句：虽然这里不是核心问题，但用var声明i是函数作用域变量，建议换成块级作用域的let，避免后续可能出现的变量泄漏问题。

修复方案 #

有两种简单可靠的解决办法：

方案1：先把DOM集合转为静态数组

把docNodes.children转换成静态数组，这样遍历的是固定的元素列表，不受DOM移动的影响：

// 把动态的children集合转为静态数组
const liList = Array.from(docNodes.children);
for (let i = 0; i < liList.length; i++) { 
  const docs = document.createElement('div'); 
  docs.appendChild(liList[i]); 
  // 记得把创建好的div添加到页面目标位置，比如：
  // document.body.appendChild(docs);
}

你也可以用扩展运算符[...docNodes.children]来替代Array.from，效果是一样的。

方案2：倒序遍历

从最后一个元素开始往前处理，这样移除后面的元素不会影响前面元素的索引，循环可以完整执行5次：

for (let i = docNodes.children.length - 1; i >= 0; i--) { 
  const docs = document.createElement('div'); 
  docs.appendChild(docNodes.children[i]); 
}

内容的提问来源于stack exchange，提问作者firstpostcommenter