Question

 <html>
   <head>
     <script>
       window.onload = function(){

         var input = document.getElementsByTagName("input");

         for(var i = 0; i < input.length; i++){

           document.body.removeChild(input[i]);

         }

       }
     </script>
  </head>
  <body>
    <input></input>
   <input></input>
    <input></input>
  </body>
</html>

我期望通过在for循环中使用removeChild方法删除输入元素，但似乎第3个输入元素（索引为2）没有被删除。

为什么？

Answer 1

我知道这很疯狂，但你可以向后解决：Fiddle

window.onload = function(){
var input = document.getElementsByTagName("input");
    for(var i = input.length-1; i>=0; i--){
        document.body.removeChild(input.item(i));
    }
}

my account fiddle too

Answer 2

input是live node collection（NodeList或HTMLCollection）。删除要修改集合的元素。这就像在迭代时删除或添加数组一样。

您可以先将集合转换为数组（添加或删除节点时数组不会更改）：

var input = [].slice.call(document.getElementsByTagName("input"));

或以相反的顺序迭代集合：

for(var i = input.length - 1; i > -1; i--)

但似乎第3个输入元素（索引为2）没有被删除。为什么呢？

让我们完成循环（子弹点是迭代）：

input.length = 3，i = 0。第一个输入元素已删除。
input.length = 2，i = 1。 最初的第三个输入元素已被删除。
input.length = 1，i = 2。循环停止，因为条件未得到满足。

第二个input元素未从文档中删除，但已被跳过。在第二次迭代中，第二个元素位于索引0，因为第一个元素已被删除。

Answer 3

每次循环执行时，它会向i添加1，并从输入数组中删除一个元素。在第三次迭代中，它尝试删除仅包含1个项目的集合中的索引2。

改变一段时间会“修复”这个

    while( input.length > 0 ){
        document.body.removeChild(input[0]);
   }

为什么javascript for循环不适用于DOM方法

3 个答案: