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 : 只讀 屬性 子節點列表集合
                      標準下：只包含元素類型的節點
                      非標準下：只包含元素類型的節點