javascript DOM删除子节点需要注意的问题

虽然js的语法和C语言类似，但是在数组方面确有很大区别。

例如：

        var f = board.childNodes;
        var f1 = [];
        for (var i = 0; i < f.length; i++) {
            if(i==0)
                continue;
            if(f[i].classList[0]!='snake_food')
                board.removeChild(f[i]);
        }

上述js代码获得了父元素board中的所有的子元素然后想要删除掉子元素中所有含有类选择器snake_food的节点。如果按照C语言的语法，这样是可以删除干净的。但是js中却不行。

 

想了很久之后，在单独debug中发现了问题所在。

 

js中的数组和C中的数组有很大不同，与其说是数组，更不如说是一个python中的列表。

上述代码在每次循环中如果删除了一个列表中的元素，那么列表中不会留下被删除元素的空隙，也就是说后面的元素会顶上来，导致元素的下标发生变化。因此最好的方法就是先不删除元素，用另一个列表记录所有要被删除的元素，最后再一起删除

代码如下：

        var f = board.childNodes;
        var f1 = [];
        for (var i = 0; i < f.length; i++) {
            if(i==0)
                continue;
            if(f[i].classList[0]!='snake_food')
                f1.push(f[i]);
        }
        for (var i = 0; i < f1.length; i++) {
            board.removeChild(f1[i]);
        }