javascript - 为什么这个 while 循环是无限的？ JavaScript 追加子对象

Question

我发誓这几天前工作正常...

elm = document.querySelectorAll(selector);
var frag = document.createDocumentFragment();
while (elm[0]){
    frag.appendChild(elm[0]);
}

是的，所以，这应该附加我们的 elm 节点列表中的每个节点。当附加第一个时，第二个“移动”到节点列表中的第一个位置，因此下一个始终是 elm[0]。它应该在 elm nodeList 被完全追加时停止。但是，这给了我一个无限循环。想法？

编辑 - 因为我多次得到相同的答案......nodeList 不是数组，它是一个实时引用。当一个节点被“移动”(这里是附加)时，它应该自动从节点列表中删除。答案都说“你一遍又一遍地附加相同的元素”——这就是正在发生的事情，不应该。 for 循环不应该 起作用，因为当附加第一个节点时，下一个节点采用它的索引。

第二次编辑

所以现在的问题是“为什么 nodeList 表现为数组？”。节点列表应该每次在某处附加节点时更新。最奇特。

解决方案(如果有人需要一些东西来处理实时+非实时节点列表)

elm = (/*however you're getting a node list*/);
var frag = document.createDocumentFragment();
var elength = elm.length;
for (var b = 0; b<elength; b++){
    if (elm.length === elength){
        frag.appendChild(elm[b]);
    } else {
        frag.appendChild(elm[0].cloneNode());
    }
}

基本上，只是检查节点列表是否改变了长度。

Answer 1

来自MDN Docs

元素.querySelectorAll

总结

返回一个非事件 NodeList，其中包含从调用它的元素派生的与指定的 CSS 选择器组匹配的所有元素。

语法

elementList = baseElement.querySelectorAll(selectors);

在哪里

• elementList 是元素对象的非事件列表。
• baseElement 是一个元素对象。
• selectors 是一组要匹配的选择器。

---

从上面的文档中您可以看到，当您将它附加到另一个元素时它不会自动删除它，因为它是非事件的。运行演示以展示该功能。

var selector = "div";
elm = document.querySelectorAll(selector);
var frag = document.createDocumentFragment();
console.log("before",elm.length);
frag.appendChild(elm[0]);
console.log("after",elm.length);

当上面的代码运行时，您会在控制台中看到。

before    3
after     3

如果你想做 while 循环，转换成一个数组然后 shift() 关闭项目

var selector = "div";
var elmNodeLIst = document.querySelectorAll(selector);
var frag = document.createDocumentFragment();
var elems = Array.prototype.slice.call(elmNodeLIst );
while (elems.length) {
    frag.appendChild(elems.shift());
}
console.log(frag);