DOM基础

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 : 只读 属性 子节点列表集合
                      标准下：只包含元素类型的节点
                      非标准下：只包含元素类型的节点