DOM
当遍历一个父节点的子节点并进行删除操作时,要注意,children
属性是一个只读属性,并且它在子节点变化时会实时更新。
// HTML
<div id="parent">
<p>First</p>
<p>Second</p>
</div>
// js
var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错
浏览器报错:parent.children[1]
不是一个有效的节点。原因就在于,当<p>First</p>
节点被删除后,parent.children
的节点数量已经从 2 变为了 1,索引[1]
已经不存在了。
因此,删除多个节点时,要注意children
属性时刻都在变化。