为什么更改对象列表中的类名会从列表中删除项目

Question

你会看到只有2个td对象丢失了类名。为什么变量 "many" 在每个 className="" 处丢失一个 itens？谁能帮我？谢谢。

    <!DOCTYPE html>
    <html>
    <head>
        <title>Why?</title>
        <style>
            .f{background:lightblue;}
            .g{background:lightcoral;}
        </style>
    </head>
    <body>
        <table id="t" style="border:1px solid black">
            <tr>
                <td class="f">1</td>
                <td class="f">2</td>
                <td class="f">3</td>
                <td class="f">4</td>
            </tr>
        </table>

        <script>
            many = document.getElementById("t").getElementsByClassName("f");
            document.write("initial length of many="+many.length+"<br>");
            for (var x = 0; x < many.length; x++) {
                many[x].className='';
                document.write("loop x="+x+" many.length="+many.length+"<br>");
            }
            document.write("final length of many="+many.length+"<br>");
        </script>
    </body>
</html>

Answer 1

getElememtsByClassName() 方法 returns 一个实时节点列表，因此，如果您删除 class-名称，您将搜索那些不再具有该 class-名称的元素立即从 many 变量中保存的 NodeList 中删除。

为什么更改对象列表中的类名会从列表中删除项目

why changing classname in a list of object removes itens from the list

html

javascript

classname