有这么一段代码:
<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的即时影响。