1.几个概念
文档： html 页面
文档对象： 页面中的元素
文档对象模型： 定义API，为了让 js 去操作页面中的元素
DOM 会把文档看成一棵树，同时会定义很多 “方法“ 和 ”属性” 来操作这棵树的每一个节点
元素.childNodes
a.只读属性，子节点列表
b.dom节点有12种
1 // NodeType 2 const unsigned short ELEMENT_NODE = 1; 3 const unsigned short ATTRIBUTE_NODE = 2; 4 const unsigned short TEXT_NODE = 3; 5 const unsigned short CDATA_SECTION_NODE = 4; 6 const unsigned short ENTITY_REFERENCE_NODE = 5; 7 const unsigned short ENTITY_NODE = 6; 8 const unsigned short PROCESSING_INSTRUCTION_NODE = 7; 9 const unsigned short COMMENT_NODE = 8; 10 const unsigned short DOCUMENT_NODE = 9; 11 const unsigned short DOCUMENT_TYPE_NODE = 10; 12 const unsigned short DOCUMENT_FRAGMENT_NODE = 11; 13 const unsigned short NOTATION_NODE = 12;
c. IE浏览器和 标准浏览器对于 文本节点 的定义是不一样的。
举例说明
<ul id="ul"> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul>
1 var oUl = document.getElementById("ul"); 2 3 alert(oUl.childNodes.length); // 9，标准 4 5 alert(oUl.childNodes.length); // 4，IE8及IE8以下 或者 称为不支持标准规范的 IE 版本
通过例子 单行文字广告向上滚动 也可以看出。
另外如下代码在 标准浏览器 中会报错。
1 function(var i=0; i<oUl.childNodes.length; i++) 2 { 3 oUl.childNodes[i].style.background = "green"; 4 }
文本节点没有style属性。
对于 元素非法嵌套的dom结构，标准和非标准浏览器解析dom时的方式也不一样。例如：
1 <ul id="ul1" style="border: 1px solid red;"> 2 <li>11111</li> 3 <li>22222</li> 4 <li>33333</li> 5 <li>44444</li> 6 <p>12345</p> 7 </ul>
注意IE6/7 、 IE8 以及 IE9+ 之间的区别。
那么如何做兼容性处理呢。在这里我们可以使用另外一个属性： children.
元素.children : 只读 属性 子节点列表集合
标准下：只包含元素类型的节点
非标准下：只包含元素类型的节点
原文：http://www.cnblogs.com/yiliweichinasoft/p/3754049.html