DOM操作中如何完全删除子节点

一、问题背景：

今天在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

原因分析：

1. i = 0时，1号格子删除，这时长度剩下4（即2号/3号/4号/5号）
2. i = 1时，索引是1的为3号，删除3号，这时长度剩下3（即2号/4号/5号）
3. i = 2时，索引是2的为5号，删除5号，这时长度剩下2（即2号/4号）
4. i = 3时，不满足1<lis.length条件，跳出循环
5. 所以结果剩下：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排查

从排查结果可以看出：

1. i = 0时，firstChild的内容是未定义的，节点类型是#text，说明这是一个文本节点（lis长度5）
2. i = 1时，时的firstChild才是1号li，节点类型是标签名称（lis长度4）
3. i = 2时，再次删除文本节点（lis长度4）
4. i = 3时，删除2号li（lis长度3）
5. i = 4时，不满足i<lis.length条件，跳出循环
6. 所以结果剩下：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倒过来计数，就会让索引与长度变成同步模式，永远删除最后一个元素，还不会引发文档节点的干扰

以上，是我对这个问题的一个总结，希望对大家有用~~