访问子结点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组(所以索引从0开始)，它具有length属性。
语法：elementnode.childNodes
注意：如果选定的节点没有子节点，则该属性返回不包含节点的Nodelist.
demo:
编辑器：sublime 字体颜色：Monokai bright(挚爱)
运行结果：
IE
UL子节点个数：3
节点类型：1 （元素）
其它浏览器：
UL子节点个数：7
节点类型：3 （文本）
注意：
1. IE全系列、firefox、chrome、opera、safari兼容问题。（屌丝一枚，什么时候能用上safari）
2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7，
3.不同浏览器输出的节点类型还不一样，需要注意！！！
如下图所示:
解决办法：挤一挤，更健康，不留空隙！
1 <ul><li>JavaScript</li><li>JQuery</li><li>PHP</li></ul>
demo:
任务
试一试，在script标签内，获取子节点，并输出相应属性。
1. 获取第一个DIV的子节点。
2. 使用for遍历每个节点.(因为获取的子节点是一个数组)
3. 输出相应节点的属性。
4.getElementsByTagName(),返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。 1 <!DOCTYPE HTML>
8 <div> 9 javascript 10 <p>javascript</p>空白节点 11 <div>jQuery</div>空白节点 12 <h5>PHP</h5>空白节点 13 </div> 14 <script type="text/javascript"> 15 var x=document.getElementsByTagName(“div”)[0].childNodes; 16 for(i=0;i<x.length;i++) 17 { 18 document.write("节点类型:"+x[i].nodeName+x[i].nodeType+x[i].nodeValue+"<br>"); 19 } 24 </script>
输出结果：
javascript
javascript
jQuery
PHP
节点类型:#text3 javascript
节点类型:P1null
节点类型:#text3
节点类型:DIV1null
节点类型:#text3
节点类型:H51null
节点类型:#text3