本文探讨在使用 JavaScript 的 removeChild 方法动态删除 DOM 节点时，直接遍历 NodeList 可能导致的逻辑错误。由于 getElementsByTagName 返回的是实时集合，删除节点会改变其长度，导致遍历索引越界或跳过元素。文章通过对比错误代码与正确实现，指出应固定长度变量或反向删除，以解决这一常见的 DOM 操作陷阱。
DOM 节点动态删除的常见陷阱
假设存在如下 HTML 结构：
相关代码如下：
<ul id="demo">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>如果运行代码1：
相关代码如下：
var ul = document.getElementById('demo');
var liList = ul.getElementsByTagName('li');
for (var i = 0; i = liList.length; i++) {
ul.removeChild(liList[i]);
} 如果上述代码未能达到预期效果，或者出现了类似被欺骗的情况，请查看下方修正后的正确代码以理解原因：
相关代码如下：
var ul = document.getElementById('demo');
var liList = ul.getElementsByTagName('li');
var lilength = liList.length;
for (var i = 0; i < lilength; i++) {
ul.removeChild(liList[0]);
}