Javascript for 循环appendChild 不会附加所有项目

Question

我正在将类中的列表元素从一个列表移动到另一个列表，但我的行为非常奇怪。

相关代码可以在这些函数中找到:

function moveright(){
            console.log("things that are selected");
            selected=document.getElementsByClassName("Selected");
            for (x=0;x<selected.length;x++){
                    console.log(selected.item(x).innerText);
            }
            list=document.getElementById("rightlist");
            console.log("Moving right");
            for (x=0;x<selected.length;x++){
                    list.appendChild(selected.item(x));
                    console.log(selected.item(x).innerText);
            }
            console.log("things that moved right");
            for (x=0;x<list.childElementCount;x++){

                    console.log(list.children.item(x).innerText);
            }
    }

function select(ele,eve){
                if (!(event.shiftKey)){
                        selected=document.getElementsByClassName("Selected");
                        for (x=0;x<selected.length;x++){
                                selected[x].className=selected[x].className.replace(" Selected","");
                        }
                }
                if (ele.className.indexOf(" Selected") == -1) {
                        ele.className=ele.className+" Selected";
                }
        }

测试元素的示例:

<li style="user-select:none" onclick="select(this)" path="./this/is/a/path" class="pft-file ext-txt Selected">test2.txt</li>

右列表和左列表只是 <ul>元素。当我选择三个项目并执行 moveright 函数时，控制台输出，它与屏幕上发生的情况相对应:

things that are selected
test1.txt
test2.txt
test3.txt
Moving right
test2.txt
test1.txt
test3.txt
things that moved right
test1.txt
test3.txt

当我用 2 个元素做同样的实验时，它仍然留下一个。当我第二次调用该函数时，最后一个元素移动到右侧列表。当我调用相同的函数将元素从右列表移动到左列表时，它工作正常。我对此一筹莫展。

编辑因此，关于发生了什么的一点线索是，当我使列表更长时，它会留下所有其他项目，因此 1,3,5 位置中的任何项目都被留下，而 0,2,4 位置是拍摄...

Answer 1

您的问题是 document.getElementsByClassName 返回一个“实时列表”，这意味着元素可以从列表中消失，并根据您对 DOM 所做的更改出现在列表中。

例如，如果您按类名“foo”进行选择，但随后从所选元素之一中删除该类，则该元素将从列表中删除。如果将 "foo" 类添加到某个元素，该元素就会添加到列表中。从集合中的 DOM 中删除整个元素也是如此。

因此，进行此类突变可能会产生令人惊讶的效果，尤其是在循环中。这基本上与在迭代数组时改变数组结构的问题相同。

作为修复，请使用 .querySelectorAll 选择元素。这会返回一个静态元素列表，该列表不会受到 DOM 更改的影响。当然，元素本身会看到自己的变化，但元素列表不会改变。