JavaScript中for of循环无法遍历完整HTMLCollection的问题求助

核心问题 #

你遇到的遍历不全问题根源是getElementsByTagName的返回值特性：

• document.getElementsByTagName("li")返回的是实时HTMLCollection（动态HTML集合），并非静态数组。只要页面DOM中的li元素发生增删，这个集合会自动实时更新内容和长度。
• 执行frost.appendChild(todos)操作时，被操作的li元素会直接从原父节点移动到新的frost容器中，原DOM树中的li数量减少，kiba的长度也会同步缩短，导致for-of循环的遍历索引错位，跳过未处理的元素。

举个简单的复现场景：假设初始有3个li，顺序为红、黑、绿，kiba初始长度为3：

1. 第一次循环取索引0的红色元素，移动到frost后，原DOM仅剩黑、绿2个li，kiba长度变为2
2. 第二次循环取索引1的元素，对应仅剩的2个元素中的第二个（绿色），直接跳过了索引0的黑色元素
3. 最终黑色元素未被遍历到，就出现了仅处理部分元素的问题。

修复方案 #

方案1：转为静态数组后遍历 #

只需要在获取li集合时转为普通静态数组，遍历的内容就会固定，不会随DOM变化自动更新，原有循环逻辑不需要修改：

let frost = document.createElement("ul");
// 以下两种转数组方式二选一即可
let kiba = Array.from(document.getElementsByTagName("li"));
// 或者写为 let kiba = [...document.getElementsByTagName("li")];
console.log(kiba);

for (todos of kiba) {
  console.log(todos.style.color);
  if (todos.style.color === `red`) { frost.appendChild(todos); } 
}

for (todos of kiba) {
  if (todos.style.color === `black`) {frost.appendChild(todos);} 
}

for (todos of kiba) {
  if (todos.style.color === `green`) {frost.appendChild(todos);} 
}

let tasks = document.getElementById(`tasks`);
console.log(frost);

方案2：优化为单次遍历完成筛选 #

你当前的实现分三次遍历筛选不同颜色的元素，可优化为单次遍历完成分类，执行效率更高：

let frost = document.createElement("ul");
let kiba = Array.from(document.getElementsByTagName("li"));
const redList = [], blackList = [], greenList = [];

// 单次遍历完成分类
for (const item of kiba) {
  const color = item.style.color;
  if (color === 'red') redList.push(item);
  else if (color === 'black') blackList.push(item);
  else if (color === 'green') greenList.push(item);
}

// 按红→黑→绿的顺序插入到frost中
[...redList, ...blackList, ...greenList].forEach(item => frost.appendChild(item));

let tasks = document.getElementById(`tasks`);
console.log(frost);

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