为什么用javascript删除元素会阻止元素的迭代

Why does removing an element with javascript prevent iteration of elements?

本文关键字：元素 迭代 javascript 删除 为什么      更新时间：2023-09-26

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

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返回的是HTMLCollection，它是live。（对于其他getElementsByXYZ方法来说是这样，但对于querySelectorAll则不然。）这意味着，如果移除索引0处的元素，则HTMLCollection的长度将减小，并且索引0处将有一个新元素，而不是刚刚移除的元素。

只要你反向努力，你就会没事的：

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

或者，将HTMLCollection转换为数组，然后在数组中循环。（请参阅下面的实际示例和代码）。

编辑：或者，正如Chris Shouts在评论中指出的那样，你可以利用不断变化的length，但这并不像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;
    }
}

使用这三种方法中的哪一种将取决于情况。复制到数组可以为您提供一个很好的静态数据集，如果您确保发布对HTMLCollection的引用，那么浏览器就有机会意识到，当情况发生变化时，它不必保持该列表的最新状态，这可以减少开销。但是您只是简单地复制引用，这会增加一些开销。：-）

附加：这里有一个例子显示了这种效果，还显示了一种从HTMLCollection:创建阵列的相当有效（但不明确）的方法

HTML:

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

JavaScript:

var lilist, liarray;
// Get the HTMLCollection, 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

实时复制

相关文章：