由于现在可以在forEach
上调用NodeList
数组方法。我想知道为什么在循环childNodes
时,如果对forEach
NodeList的内容进行更改,而forEach
不会检测到更改。
grid.childNodes.forEach(function(tableRow, index, nodeList) {
tableRow.remove();
});
在这里,我试图遍历我的table(grid)元素子级,并从表中删除每个子级(tableRow
)。但是,forEach
永远不会完全遍历每个元素,总是遗漏最后一个tableRow
成为remove
,因为我认为这与childNodes NodeList处于活动状态以及forEach不存在有关能够正确地遵循它或其他东西。
答案 0 :(得分:1)
这是因为在较低级别上,.forEach()
仍在计数并使用元素的索引。删除某些元素时,就是将它们从数组/节点列表的开头删除,然后索引器变得不准确,因为所有元素索引必须向下移动一个。例如,以前位于索引位置5的元素现在位于索引位置4。
对于这样的事情,最好使用计数循环并从最后一个索引开始向后删除元素。这将在循环期间保持适当的计数,因为不会修改元素到索引的映射。
这是一个例子:
let grid = document.getElementById("myTable");
document.querySelector("input").addEventListener("click", function(){
for(i = grid.childNodes.length-1; i > -1; i--) {
grid.removeChild(grid.childNodes[i]);
}
});
<table id="myTable">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
</tr>
</table>
<input type="button" value="Delete Rows">
现在,如果您使用DOM Table API和 .deleteRow()
let grid = document.getElementById("myTable");
document.querySelector("input").addEventListener("click", function(){
for(i = grid.rows.length-1; i > -1; i--) {
grid.deleteRow(i);
}
});
<table id="myTable">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
</tr>
</table>
<input type="button" value="Delete Rows">
当然,您只需清除.innerHTML
即可清除表中的所有内容。
let grid = document.getElementById("myTable");
document.querySelector("input").addEventListener("click", function(){
grid.innerHTML = "";
});
<table id="myTable">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
</tr>
</table>
<input type="button" value="Delete Rows">