为什么使用JavaScript删除元素会阻止元素迭代？

问题描述

| 我正在尝试用标签替换页面上的所有文本字段。

function replaceInputTextFieldsWithValues() {

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

    for(var i = 0; i < inputFields.length; i++) {
        if(inputFields[i].getAttribute(\"type\")== \"text\") {          
            var parent = inputFields[i].parentNode;
            var value = inputFields[i].value;
            parent.removeChild(inputFields[i]);
            var label = document.createElement(\'label\');
            label.setAttribute(\'for\',value);
            label.innerHTML = value;
            parent.appendChild(label);
        }
    }
}

我的HTML文档组织在表格中。该功能似乎仅在每个表的第一个元素上起作用。 另一方面，当我删除该行时：

parent.removeChild(inputFields[i]);

该代码似乎工作正常。为什么会发生这种情况，我该如何解决？     

解决方法

从

getElementsByTagName

得到的回报是a3ѭ，这是实时的。这意味着，如果删除索引为

0

的元素，则ѭ3的长度将减小，并且索引为

0

的元素将是一个新元素，而不是刚刚删除的元素。 只需逐步解决它，您就可以了：

for(var i = inputFields.length - 1; i >= 0; i--) {
    // ...
}

或者，将“ 3”转换为数组，然后循环遍历该数组。 （请参见下面的实时示例和代码）。 编辑：或者，正如Chris Shouts在评论中指出的那样，您可以只使用变化的just9ѭ，但这并不像Chris的建议那么简单，因为您有时只删除元素。它看起来像这样：

var inputFields = document.getElementsByTagName(\"input\");
var i = 0;
while (i < inputFields.length) {
    if(inputFields[i].getAttribute(\"type\")== \"text\") {
       // Remove it and DON\'T increment `index`
    }
    else {
       // Skip this one by incrementing `index`
       ++index;
    }
}

使用这三种方法中的哪一种取决于情况。复制到数组为您提供了一个不错的静态数据集，并且，如果您确保释放对ѭ3的引用，则可以使浏览器有机会意识到不必将列表保持不变，事态发生变化时，可以减少开销。但是您只是在简短地复制引用，这会增加一些开销。 :-) 附加：这是一个显示此效果的示例，还显示了一种从

NodeList

创建数组的相当有效（但晦涩）的方法： HTML：

<ul>
  <li>LI0</li>
  <li>LI1</li>
  <li>LI2</li>
</ul>

JavaScript：

var lilist,liarray;

// Get the NodeList,which is live
lilist = document.getElementsByTagName(\'li\');

// Create an array of its elements
liarray = Array.prototype.slice.call(lilist,0);

// Show initial length of both
display(\"lilist.length = \" + lilist.length);   // Shows 3
display(\"liarray.length = \" + liarray.length); // Shows 3

// Show what the 0th element of both is (both show \"LI0\" in the live example)
display(\"lilist[0].innerHTML = \" + lilist[0].innerHTML);   // Shows LI0
display(\"liarray[0].innerHTML = \" + liarray[0].innerHTML); // Shows LI0

// Remove the first list item
display(\"Removing item 0\");
lilist[0].parentNode.removeChild(lilist[0]);

// Show the length of both,note that the list\'s length
// has gone down,but the array\'s hasn\'t
display(\"lilist.length = \" + lilist.length);    // Shows 2,not 3
display(\"liarray.length = \" + liarray.length);  // Still shows 3

// Show what the 0th element of both *now* is
display(\"lilist[0].innerHTML = \" + lilist[0].innerHTML);   // Shows LI1 now
display(\"liarray[0].innerHTML = \" + liarray[0].innerHTML); // Still shows LI0

即时复制