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

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

有这么一段代码：

<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的即时影响。