首页 > 代码库 > DOM基础

DOM基础

2024-07-06 04:19:31   227人阅读

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






























        

            
                
                  
                
                

                    联系

                    我们