JavaScript中for循环调用appendChild无法移动全部列表元素问题

这个问题我太熟啦！核心原因出在getElementsByClassName()返回的对象上——它可不是普通数组，而是实时的HTMLCollection。

问题根源：实时集合的特性 #

HTMLCollection是DOM的实时视图，也就是说，当你修改DOM结构（比如把元素从一个列表移到另一个列表），这个集合会自动同步更新：被移走的元素会立刻从集合中消失，集合的长度也会跟着变化。

举个具体的例子，假设你选中了3个带Selected类的元素：

• 初始时selected.length是3，x从0开始循环
• 当x=0时，你移走第一个元素，此时这个元素不再属于原来的DOM结构，selected集合会自动移除它，长度变成2
• x递增到1，此时集合里剩下原来的第2、3个元素，你取索引1的元素（也就是原来的第3个）移走，集合长度变成1
• x递增到2，这时候x（2）已经大于集合长度（1），循环直接结束，原来的第2个元素就被落下了，自然没被移动

解决办法：转成静态数组 #

要避免这个问题，只需要把实时的HTMLCollection转换成静态的数组，这样后续DOM变化就不会影响数组的内容了。有几种简单的方式：

方法1：使用Array.from()转换

function moveright(){
  console.log("things that are selected");
  const selected = document.getElementsByClassName("Selected");
  // 转成静态数组，脱离实时集合的绑定
  const selectedElements = Array.from(selected);
  
  selectedElements.forEach(el => console.log(el.innerText));
  
  const rightList = document.getElementById("rightlist");
  console.log("Moving right");
  selectedElements.forEach(el => rightList.appendChild(el));
}

方法2：使用展开运算符[...]转换

和Array.from()效果一样，写法更简洁：

const selectedElements = [...document.getElementsByClassName("Selected")];

额外提示：声明循环变量

另外注意，你原来的代码里循环变量x没有用let或const声明，会变成全局变量，可能引发其他意外问题，建议始终用块级作用域变量。

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