DOM基础

1.几个概念

  文档： html 页面

  文档对象： 页面中的元素

  文档对象模型： 定义API，为了让 js 去操作页面中的元素

  DOM 会把文档看成一棵树，同时会定义很多 “方法“ 和 ”属性” 来操作这棵树的每一个节点

 

  元素.childNodes

        a.只读属性，子节点列表

        b.dom节点有12种

           

       // NodeType
            const unsigned short      ELEMENT_NODE                   = 1;
            const unsigned short      ATTRIBUTE_NODE                 = 2;
            const unsigned short      TEXT_NODE                      = 3;
            const unsigned short      CDATA_SECTION_NODE             = 4;
            const unsigned short      ENTITY_REFERENCE_NODE          = 5;
            const unsigned short      ENTITY_NODE                    = 6;
            const unsigned short      PROCESSING_INSTRUCTION_NODE    = 7;
            const unsigned short      COMMENT_NODE                   = 8;
            const unsigned short      DOCUMENT_NODE                  = 9;
            const unsigned short      DOCUMENT_TYPE_NODE             = 10;
            const unsigned short      DOCUMENT_FRAGMENT_NODE         = 11;
            const unsigned short      NOTATION_NODE                  = 12;

 

        c. IE浏览器和 标准浏览器对于  文本节点 的定义是不一样的。

      举例说明

 

<ul id="ul">
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

var oUl = document.getElementById("ul");

alert(oUl.childNodes.length);  // 9，标准

alert(oUl.childNodes.length);  // 4，IE8及IE8以下 或者 称为不支持标准规范的 IE 版本

通过例子 单行文字广告向上滚动 也可以看出。

 另外如下代码在 标准浏览器 中会报错。

function(var i=0; i<oUl.childNodes.length; i++)
{
    oUl.childNodes[i].style.background = "green";
}

文本节点没有style属性。

对于 元素非法嵌套的dom结构，标准和非标准浏览器解析dom时的方式也不一样。例如：

<ul id="ul1" style="border: 1px solid red;">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    <p>12345</p>
</ul>

注意IE6/7 、 IE8 以及 IE9+ 之间的区别。

 那么如何做兼容性处理呢。在这里我们可以使用另外一个属性： children.

 元素.children : 只读 属性 子节点列表集合
                      标准下：只包含元素类型的节点
                      非标准下：只包含元素类型的节点