一、问题背景：
今天在Dom操作中使用removeChild方法的时候遇到了一些疑问
现有以下结构的标签，需要在一次点击事件后将ul中的li完全删除
<ul id="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
demo样式
二、排查过程
我开始非常天真地使用了以下的循环语句：
document.onclick = function () {
for(var i = 0; i<lis.length; i++){
ul.removeChild(lis[i]);
}
}
//结果剩余：2号、4号
结果1
原因分析：
- i = 0时，1号格子删除，这时长度剩下4（即2号/3号/4号/5号）
- i = 1时，索引是1的为3号，删除3号，这时长度剩下3（即2号/4号/5号）
- i = 2时，索引是2的为5号，删除5号，这时长度剩下2（即2号/4号）
- i = 3时，不满足1<lis.length条件，跳出循环
- 所以结果剩下：2号/4号
因为每次删除后，索引的位置与节点长度的同时变化，导致结果异常，所以现在只要锁定其中一个条件就好了；因为节点长度随着remove的动作必定会发生变化，所以就只能固定删除索引
随后我天真地改进了方法：将删除节点固定为父级的firstChild
document.onclick = function () {
for(var i = 0; i<lis.length; i++){
ul.removeChild(ul.firstChild);
}
}
//结果剩余：3号、4号、5号
结果2
PS：此时我的内心是崩溃的。。这还越改剩的越多了！！
经过网上的查询，发现了问题所在，这种方法中会将空白及换行节点算入子节点中
//来看看排查：
document.onclick = function () {
for(var i = 0; i<lis.length; i++){
//这里在每次删除前，先行打印出firstChild的信息
console.log("i值:"+i+" / lis长度:"+lis.length+" / li编号:"+ul.firstChild.innerHTML+" / 节点类型:"+ul.firstChild.nodeName);
ul.removeChild(ul.firstChild);
}
}
fistChild排查
从排查结果可以看出：
- i = 0时，firstChild的内容是未定义的，节点类型是#text，说明这是一个文本节点（lis长度5）
- i = 1时，时的firstChild才是1号li，节点类型是标签名称（lis长度4）
- i = 2时，再次删除文本节点（lis长度4）
- i = 3时，删除2号li（lis长度3）
- i = 4时，不满足i<lis.length条件，跳出循环
- 所以结果剩下：3号/4号/5号
同样的以ul.lastChild去删除，也会遇到文本节点的干扰
这里附上一个对于各节点，nodName及nodeType的返回值说明：
nodeName
nodeType
三、正确方法
第一种是我比较喜欢的：使用while循环
document.onclick = function () {
//判断父级中是否有子集，只要有就删除firstChild
while(ul.hasChildNodes()){
console.log("节点编号:"+ul.firstChild.innerHTML+" / 节点类型:"+ul.firstChild);
ul.removeChild(ul.firstChild);
}
}
while循环排查
可以看出，不管是不是遇到文本节点都会接着删，删到空为止
第二种是不碰文档节点的：i倒计数
document.onclick = function () {
for(var i = lis.length - 1; i>=0; i--){
console.log("i值:"+i+" / lis长度:"+lis.length+" / li编号:"+ul.lastChild.innerHTML+" / 节点类型:"+ul.lastChild.nodeName);
ul.removeChild(lis[i]);
}
}
i倒计数排查
这种方法将i倒过来计数，就会让索引与长度变成同步模式，永远删除最后一个元素，还不会引发文档节点的干扰
以上，是我对这个问题的一个总结，希望对大家有用~~
