首先要了解什么是node，节点的分类：元素节点、文本节点、等等 。 然后了解节点树。

Q1. childNodes到底是什么？

    childNodes 直译意思就是子元素节点

Q2. 节点包含什么？

    当JS使用childNodes获取子元素节点时，获取的内容是包含了父元素下的所有子元素集合的列表，是一个数组对象。

    即，多个元素组成的数组对象。

例子代码：

<div id="testEle">
    <div>div元素</div>
    <p>p元素<span>span元素</span></p>
    <input type="text" value="input元素">
    11111111
</div>
<script>
    var testChildEle = document.getElementById('testEle').childNodes;
    var Num = testChildEle.length;
    console.log('div的子节点数量为：'+ Num);
    for(var i=0;i<Num;i++){
        console.log('节点序号：'+(i+1));
        console.log('节点类型：'+testChildEle[i].nodeType);
        console.log('节点名称：'+testChildEle[i].nodeName);
    }
</script>

说明：

不同浏览器对childNodes获取的节点有不同解释，以上代码在IE和Chrome、Firefox浏览器中，会得到不同的结果。

另外，不同的书写方式在相同浏览器中也会得到不同的结果，如把上面的HTML结构修改如下：

<div id="testEle">
    <div>div元素</div><p>p元素<span>span元素</span></p><input type="text" value="input元素">11111111
</div>

和上面的例子看起来只是修改了断行，并没有实质性的改变，但在Chrome中输出结果却发生了改变。

建议：

由于childNodes的兼容性问题，同时可以替代该方法的实现方式有很多，所以实际应用中，比较少使用了。