[JavaScript] 9.JS DOM模型

簡介

DOM模型的全稱是：DocumentObject Model, 即：文檔對象模型，它定義了操作文檔對象的接口。

WEB頁面的HTML文檔，document就是根節點，其它的子對象就是子結點。

DOM模型在AJAX開發中的作用。

在ajax中，DOM模型實際上是最核心的結構，是所有ajax開發的基礎架構。如果沒有DOM模型，就沒有辦法在客戶端改變頁面的內容，所有的局部刷新，異步要求也就無從實現。熟練掌握DOM模型的相干技術，才算真正掌握了ajax開發精華。

進程

關于閱讀器裝載和顯示頁面的大致進程敘述以下：

1.下載源代碼

2.通過頁面源代碼加載相干內容到內存，也就是根據HTML源碼在內存中構建相干DOM對象。

3.根據DOM對象的相干屬性，來進行顯示。

結點

概念：在DOM模型中，全部文檔就是由層次不同的多個節點組成，可以說結點代表了全部內容。

類型：元素結點、文本結點和屬性結點。

         <fontid=“font1” color=“red”>hello DOM!</font>

         文本節點和屬性結點都看做元素結點的子結點

我們1般所說的結點指的就是元素結點。

援用：

1.直接援用結點

         使用document.getElementById()援用指定id的結點

         使用document.getElementsByTagName(“a”)，將所有<a>元素結點放到1個數組中返回。

         使用document.getElementsByName(“abc”)，將所有name屬性為”abc”的元素結點放到1個數組中返回。

2.間接援用節點

         ①援用子結點

         每一個結點都有1個childNodes集合屬性，類型是數組對象，表示該結點的所有子結點的集合。這些子結點依照它在文檔中出現的順序排列，因此可以通過索引來順次訪問各個子結點。

         firstChild,lastChild

         ②援用父節點

         DOM模型中，除根結點，每一個結點都唯一1個父節點，可以用parentNode屬性來援用。

         ③援用兄弟結點

         element.nextSibling;  //援用下1個兄弟結點

         element.previousSibling;  //援用上1個兄弟結點

         如果該結點沒有相應的兄弟結點，則屬性返回null.

閱讀器差異問題

原則：如果ie和火狐產生差異沖突，盡可能解決。如果太復雜不想去做，1切以IE為準。

屬性：

* nodeName:元素結點返回結點類型(即，標記名稱)；屬性結點返回undefined；文本節點返回"#text".

* nodeType:元素節點返回1，屬性節點返回2，文本節點返回3

* nodeValue:元素節點返回null, 屬性節點返回undefined,文本結點返回文本值。

通過nodeType解決火狐和ie關于空白文本是不是作為子節點的差異，比如：

要得到div2的下1個元素節點：

                   <divid=div1 >

                            <divid=div2 name="div22" >aaaaa</div>

                            <divid=div3 >bbbb</div>

                            <divid=div4 >cccc</div>

                   </div>

//通過while循環判斷nodetype類型，解決閱讀器差異問題！

                                     while(div2.nextSibling.nodeType!=1){

                                               div2= div2.nextSibling;

                                     }

                                     div3= div2.nextSibling;

處理

屬性節點

         元素結點.屬性名稱（可以讀寫屬性值）

         使用setAttritbute(),getAttribute()添加和設置屬性

function testAttr() {

                                     varf = document.getElementById("font1");

                                     alert(f.color);

                                     f.color="blue";//直接操作

                                     alert(f.getAttribute("color"));

                                     f.setAttribute("color","green");//可動態傳入操作

}

文本結點

         要獲得1個結點內的文本，1般使用innerHTML屬性

         innerHTML屬性不局限于操作1個結點，而是可使用HTML片斷直接填充頁面或直接獲得HTML片斷，大大提高了開發的靈活性。

function testInnerHTML(){

                                     alert(document.getElementById("div3").innerHTML);

}

<div id="div3">將得到的文本</div>

由于innerHTML屬性可寫，所以可以HTML片斷來直接填充頁面

function testInnerHTML(){

                var dd =document.getElementById("div3");

                dd.innerHTML = "<b>奧運會馬上要開了！<b><h1>甚么時候啊？</h1><h2>是8.8號</h2>";

}

改變文檔的層次結構

         使用document.createElement方法創建元素結點

         vardivElement = document.createElement(“div")

         使用appendChild方法添加結點

         parentNode.appendChild(childElement);

         使用insertBefore方法插入子結點

         parentNode.insertBefore(newNode,beforeNode)

         使用replaceChild方法取代子結點

         parentNode.replaceChild(newNode,oldNode)

         oldNode必須是已存在的，不然會產生異常。

         使用removeChild方法刪除子結點

         parentNode.removeChild(childNode);

         下拉列表和表格不能用這樣的DOM方法，而要用DHTML接口中的方法。

業務思想

DOM模型的本質是操作文檔對象的接口，通過demo深入理解，掌握其基本屬性和方法，也是很簡單的。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈