为什么这个while循环是无限的？JavaScript追加子对象_Javascript_While Loop_Infinite Loop_Appendchild

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

javascript

为什么这个while循环是无限的？JavaScript追加子对象,javascript,while-loop,infinite-loop,appendchild,Javascript,While Loop,Infinite Loop,Appendchild,我发誓这几天前还不错 elm = document.querySelectorAll(selector); var frag = document.createDocumentFragment(); while (elm[0]){ frag.appendChild(elm[0]); } 好的，这应该附加elm节点列表中的每个节点。追加第一个后，第二个将移动到节点列表中的第一个位置，因此下一个始终是elm[0]。当elm节点列表被完全附加时，它应该停止。然而，这给了我一个无限循环。想法

我发誓这几天前还不错

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

好的，这应该附加elm节点列表中的每个节点。追加第一个后，第二个将移动到节点列表中的第一个位置，因此下一个始终是elm[0]。当elm节点列表被完全附加时，它应该停止。然而，这给了我一个无限循环。想法

编辑-因为我多次得到相同的答案。。。节点列表不是数组，而是活动引用。将节点移动到此处时，应自动将其从节点列表中删除。答案都说你在一次又一次地附加相同的元素——这就是正在发生的事情，不应该发生。for循环不应该工作，因为当附加第一个节点时，下一个节点将获取其索引

第二版

现在的问题是，为什么节点列表的行为是数组？。每次将节点追加到某个位置时，节点列表都应该更新。非常奇怪

解决方案，以防有人需要处理活动节点和非活动节点列表

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());
    }
}

基本上，只需检查节点列表的长度是否发生了变化。

我一开始就没想到它会起作用

elm数组已初始化，并且从未更新。即使运行document.querySelectorAllselector的结果；将返回不同的内容，这不会更改数组中的当前引用

您可能需要重新运行选择器，或者在附加数组中的第一个元素后手动删除它。

我本来不希望它能工作

elm数组已初始化，并且从未更新。即使运行document.querySelectorAllselector的结果；将返回不同的内容，这不会更改数组中的当前引用

您可能需要重新运行选择器，或者在附加数组中的第一个元素后手动删除它。

正如现在所写的，这是一个无限循环，因为elm[0]始终引用同一个元素，并且该元素从不为空。任何非空/非零结果都是真的。您也不会对元素本身进行任何操作，以使其在列表中迭代。您应该使用for循环而不是while，或者至少使用某种索引器来尝试遍历集合

elm = document.querySelectorAll(selector);
var frag = document.createDocumentFragment();
for (i= 0; i < elm.length; i++)
{
    frag.appendChild(elm[i]);
}

编辑：

从：

现场收藏

在大多数情况下，节点列表是一个实时集合。这意味着DOM树>上的更改将反映在集合上

elm = document.querySelectorAll(selector);
var frag = document.createDocumentFragment();
for (i= 0; i < elm.length; i++)
{
    frag.appendChild(elm[i]);
}

var links=document.getElementsByTagName'a'；//例如links.length==2 document.body.appendChild链接[0]。cloneNodetrue；//另一个链接将添加到文档中 //“链接”节点列表将自动更新 //links.length==3。如果NodeList是document.queryselectoral的返回值，则它不是活动的

在本文档中，您当前使用的方法表明您没有活动节点列表。因此，追加将永远不会修改原始列表。您需要修改循环中的用法以镜像.cloneNodetrue的用法，或者手动迭代。

正如现在编写的那样，这是一个无限循环，因为elm[0]始终引用同一个元素，并且该元素从不为空。任何非空/非零结果都将为真。您也不会对元素本身进行任何操作，以使其在列表中迭代。您应该使用for循环而不是while，或者至少使用某种索引器来尝试遍历集合

elm = document.querySelectorAll(selector);
var frag = document.createDocumentFragment();
for (i= 0; i < elm.length; i++)
{
    frag.appendChild(elm[i]);
}

编辑：

从：

现场收藏

在大多数情况下，节点列表是一个实时集合。这意味着DOM树>上的更改将反映在集合上

elm = document.querySelectorAll(selector);
var frag = document.createDocumentFragment();
for (i= 0; i < elm.length; i++)
{
    frag.appendChild(elm[i]);
}

在本文档中，您当前使用的方法表明您没有活动节点列表。因此，追加将永远不会修改原始列表。您需要修改循环中的用法，以镜像.cloneNodetrue的用法，或者手动迭代。

您正在一次又一次地在节点列表中添加第一项。您从不从数组中删除任何项，而是始终将第一个项添加到片段中。第一个总是一样的

elm = document.querySelectorAll(selector);
var frag = document.createDocumentFragment();
while (elm.length){
    frag.appendChild(elm.shift());
}

这可能更接近你的本意。我们可以使用while elm.length，因为当项目从数组中移除时，最终长度将为零，这是一个flasy值，循环将停止

我们使用elm.shift从数组中获取项，因为该方法将返回索引为零的项，然后重新将其从数组中移出，这将为我们提供所需的原始数组的变异

我想您认为这可能有效，因为一个节点只能有一个父节点。意味着添加某处会将其从上一个父项中移除。但是，elm不是DOM片段。它只是一个aray或者节点列表，保存对元素的引用。数组不是这些元素的父节点，它只是保存引用

如果您的循环是这样的，那么它可能会工作，因为您每次都要查询父节点的子节点，这是一个随着您的移动而实际发生变化的节点列表：

elm = document.getElementById(id);
var frag = document.createDocumentFragment();
while (elm.children[0]){
    frag.appendChild(elm.children[0]);
}

您正在一次又一次地追加节点列表中的第一项。您从不从数组中删除任何项，而是始终将第一个项添加到片段中。第一个总是一样的

elm = document.querySelectorAll(selector);
var frag = document.createDocumentFragment();
while (elm.length){
    frag.appendChild(elm.shift());
}

这可能更接近你的本意。我们可以使用while elm.length，因为当项目从数组中移除时，最终长度将为零，这是一个flasy值，循环将停止

我们使用elm.shift从数组中获取项，因为该方法将返回索引为零的项，并将其从数组中移除，这使我们可以对需要的原始数组进行变异

如果您的循环是这样的，那么它可能会工作，因为您每次都要查询父节点的子节点，这是一个随着您的移动而实际发生变化的节点列表：

elm = document.getElementById(id);
var frag = document.createDocumentFragment();
while (elm.children[0]){
    frag.appendChild(elm.children[0]);
}

elm[0]是静态的，在上面的代码中是不变的修正如下

elm = document.querySelectorAll(".container");
var frag = document.createDocumentFragment();
console.log(elm);
var i=0;
while (elm[i]){
    frag.appendChild(elm[i++]);
}

elm[0]是静态的，在上面的代码中是不变的修正如下

elm = document.querySelectorAll(".container");
var frag = document.createDocumentFragment();
console.log(elm);
var i=0;
while (elm[i]){
    frag.appendChild(elm[i++]);
}

实际上，我并没有太多地关注代码，从评论来看，它是否有意义；但是，如果这在几天前起作用，那么问题在于您给代码选择器的输入

这时单元测试就派上了用场。如果您能记住代码工作时使用的输入，那么您可以让它再次工作并从那里开始调试

否则，你只是在欺骗自己。

我实际上没有太多地关注代码，以及从评论判断它是否有意义；但是，如果这在几天前起作用，那么问题在于您给代码选择器的输入

这时单元测试就派上了用场。如果您能记住代码工作时使用的输入，那么您可以让它再次工作并从那里开始调试

否则，你就是在欺骗自己。

来自

Element.querySelectorAll 总结返回一个非活动节点列表，其中包含从调用它的元素派生的、与指定的CSS选择器组匹配的所有元素

语法在哪里

elementList是元素对象的非活动列表。 baseElement是一个元素对象。选择器是一组要匹配的选择器。从上面的文档中，您可以看到，当您将它附加到另一个元素时，它不会自动删除它，因为它是非活动的。运行演示以显示该功能

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循环，请将其转换为数组，然后将项目移开

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);

从

Element.querySelectorAll 总结返回一个非活动节点列表，其中包含从调用它的元素派生的、与指定的CSS选择器组匹配的所有元素

语法在哪里

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循环，请将其转换为数组，然后将项目移开

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);

您在任何时候都不会修改elm节点列表，这意味着while循环将继续追加列表中的第一个元素。我认为这里的主要问题是JavaScript不是C。如果我没有记错的话，数组没有被修改，而是被复制。所以现在的问题是，为什么节点列表的行为是数组？。每次将节点追加到某个位置时，节点列表都应该更新。非常奇怪。谁教你的？它不是活的。请参阅下面我编辑的文章，其中有一个指向文档的链接。@epascarello这是我过去每次使用节点列表时都会遇到的问题。您在任何时候都不会修改elm节点列表，这意味着while循环将继续追加列表中的第一个元素。我认为这里的主要问题是JavaScript不是C。数组没有进行适当的修改，如果我没记错的话，是复制的。所以现在的问题是，为什么节点列表的行为是数组？。节点列表应为

每次在某处追加节点时更新。非常奇怪。谁教你的？它不是活的。请参阅下面我编辑过的文章，其中有一个指向文档的链接。@epascarello，以及我过去每次使用节点列表时的链接。节点列表不是普通数组。节点列表应该随对节点所做的更改而实时更新。因此，当附加列表中的节点时，应重新写入当前节点列表。也许对原始节点的引用仍然存在。。。有趣的想法。我将进一步研究它。节点列表不是普通数组。节点列表应该随对节点所做的更改而实时更新。因此，当附加列表中的节点时，应重新写入当前节点列表。也许对原始节点的引用仍然存在。。。有趣的想法。我会进一步调查的。这就是问题所在。。。。如果elm是一个节点列表，这里选择的节点、元素，当它们附加到documentFragment时，它们将从dom中删除，并且不应再存在于节点列表中。但这就是问题所在。。。。如果elm是一个节点列表，这里选择的节点、元素，当它们附加到documentFragment时，它们将从dom中删除，并且不应再存在于节点列表中。@RandyHall:Yah，我在发布我的问题的编辑时被叫走了，从文档中可以看出我为什么会给出我的答案，可能还有一种不同的方法来实现你想要的结果。@RandyHall:Yah，我在发布我的问题的编辑时被叫走了，从文档中可以看出我为什么会给出我的答案，可能还有一种不同的方法来实现你想要的结果。看来你的答案最有说服力。这是一个问题lol。我有时有其他方法检索节点列表，这是一个更大的系统的一部分。我必须为传递到同一函数中的活动/非活动节点列表创建一个变通方法，以创建一个doc frag。好消息。看来你的答案最有说服力。这是一个问题lol。我有时有其他方法检索节点列表，这是一个更大的系统的一部分。我必须为传递到同一函数中的活动/非活动节点列表创建一个变通方法，以创建一个doc frag。好消息。