了解childNodes 和 children 区别

做题的时候碰见了关于 childNodes 和 children之间的区别的问题,查了一点点资料,对他们二者之间也有了一些了解,写博客加深一下自己的印象.

二者的定义:

1. childNodes: 返回包含指定节点的子节点的集合，该集合为即时更新的集合
2. children : 是一个只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection,属于非标准型，不过它还是依旧可以被所有的浏览器所支持

用下面的一段代码来展示二者之间具体的区别:
childNodes的结果:

    <ul id ='list'>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>

    <script>
        let oul = document.getElementById('list');
        let olis = oul.childNodes;
        console.log(olis.length);
        console.log(olis);
    </script>

打印结果如下图:

在我们的认识中,这里难道不应该打印3吗?他为啥打印了7呢,因为Internet Explorer 会忽略节点之间生成的空白文本节点（比如换行字符），而 Mozilla 不这么做。

我们具体来看看到到时为啥会打印7呢?



childNodes 获取的是元素所有的子节点.

childrem 打印情况:

        let oul = document.getElementById('list');
        let olis = oul.children;
        console.log(olis.length);
        console.log(olis);

打印的结果如下:

children 用来获取所有的子元素,所以打印的结果是 3. children不需要去计算空格所占的节点

获取标签里面的内容值需要通过下标获取对应的元素,然后获取元素中的内容即可:

        console.log(oul.childNodes[3].innerHTML);
        console.log(oul.children[1].innerHTML);

得到的结果实现相同的,如下图:

    for(let i = 0 ; i < olis.length ; i++) {
        if (oul.childNodes[i].nodeType == 1) {
            // nodes.childNodes[i] 是元素节点
            console.log(`${i}是元素节点`);
        }else if(oul.childNodes[i].nodeType == 2) {
            console.log(`${i}是属性节点`);
        }else {
            console.log(`${i}是文本节点`);
        }
    }

不建议使用childNodes方法。
硬要使用这个方法，可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。因此我们做如下判断:

        for(let i = 0 ; i < olis.length ; i++) {
            if (oul.childNodes[i].nodeType == 1) {
                // nodes.childNodes[i] 是元素节点
                console.log(`${i}是元素节点`);
            }else if(oul.childNodes[i].nodeType == 2) {
                console.log(`${i}是属性节点`);
            }else {
                console.log(`${i}是文本节点`);
            }
        }

和 childNodes 方法相比,更推荐使用 children方法.