JavaScript 坑与技巧：DOM

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属性时刻都在变化。