循环removeChild要注意对DOM的即时影响

iteye_15136

于 2010-01-14 13:47:59 发布

阅读量156

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： C C++ C#

本文链接：https://blog.youkuaiyun.com/iteye_15136/article/details/81817708

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文通过三个实例探讨了在JavaScript中使用removeChild方法从DOM中移除元素时遇到的问题，并提出了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有这么一段代码：

<ul id="demo">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

var ul = document.getElementById('demo');
var liList = ul.getElementsByTagName('li');
for (var i = 0; i < = liList.length; i++) {
ul.removeChild(liList[i]);
}

运行代码后，发现只剩下节点b 了。

var ul = document.getElementById('demo');
var liList = ul.getElementsByTagName('li');
for (var i = 0; i <  liList.length; i++) {
 ul.removeChild(liList[0]);
}

运行上面代码后，发现只剩下节点c 了。

最后把length 提取出来，先定义，缓存起来。

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]);
}

运行代码，才真正3个li都被删除。

通过这3个例子的对比，相信你已经发现其中的问题。

可以看出removeChild 删除元素后，对DOM的即时影响。