javascript - 删除子节点会阻止其他兄弟节点被删除？

Question

我正在尝试从元素#LoginFormErrorWrapper 中删除所有具有类 .FormErrorMessage 的子节点。这些是 XUL 的“描述”元素，如果这会产生影响的话。

使用此代码：

var Messages = document.getElementById('LoginFormErrorWrapper').getElementsByClassName("FormErrorMessage");
for (var i = 0; i < Messages.length; i++) {
   var node = Messages[i];
   document.getElementById('LoginFormErrorWrapper').removeChild(node); 
}

仅删除第一个元素。Messages 包含所有元素，但是一旦第一个子元素被删除，循环就会停止。如果我注释掉 removeChild 行并提醒节点，它会提醒所有节点。为什么删除第一个孩子后它会停止循环？父级仍然存在。

Answer 1

getElementsByClassName返回一个活动的NodeList。因此，当您从 DOM 中删除一个元素时，它也会从 NodeList 中删除，从而导致各种副作用。

您可以通过将 NodeList 转换为 Array 来避免它们

var Messages = [].slice.call(document.getElementById('LoginFormErrorWrapper').getElementsByClassName("FormErrorMessage"));