代码
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <div id="box"> <p>javascript</p> <div>jQuery</div> <h5>PHP</h5> </div> <div id="test"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div> <script type="text/javascript"> var x = document.getElementById("box").childNodes; for(var i = 0; i < x.length; i++){ document.write("节点" + i + "的属性是：" + x[i].nodeType + "<br>"); } document.write("<br><br><br>"); var y = document.getElementById("test").childNodes; for(var i = 0; i < x.length; i++){ document.write("节点" + i + "的属性是：" + y[i].nodeType + "<br>"); } </script> </body> </html>
结果
javascript
jQuery
PHP
javascript
jQuery
PHP
节点0的属性是：3 节点1的属性是：1 节点2的属性是：3 节点3的属性是：1 节点4的属性是：3 节点5的属性是：1 节点6的属性是：3 节点0的属性是：1 节点1的属性是：1 节点2的属性是：1
看代码中高亮的两段代码，内容一模一样但是排版不一样，这就导致了一个奇怪的结果（在火狐浏览器和chrome浏览器中测试）如上图结果所示。
由此可知childNodes属性的结果和排版有关。
而且childNodes属性还与浏览器的内核有关：
节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7
