[JavaScript] 9.JS DOM模型

簡(jiǎn)介

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

WEB頁(yè)面的HTML文檔，document就是根節(jié)點(diǎn)，其它的子對(duì)象就是子結(jié)點(diǎn)。

DOM模型在AJAX開發(fā)中的作用。

在ajax中，DOM模型實(shí)際上是最核心的結(jié)構(gòu)，是所有ajax開發(fā)的基礎(chǔ)架構(gòu)。如果沒(méi)有DOM模型，就沒(méi)有辦法在客戶端改變頁(yè)面的內(nèi)容，所有的局部刷新，異步要求也就無(wú)從實(shí)現(xiàn)。熟練掌握DOM模型的相干技術(shù)，才算真正掌握了ajax開發(fā)精華。

進(jìn)程

關(guān)于閱讀器裝載和顯示頁(yè)面的大致進(jìn)程敘述以下：

1.下載源代碼

2.通過(guò)頁(yè)面源代碼加載相干內(nèi)容到內(nèi)存，也就是根據(jù)HTML源碼在內(nèi)存中構(gòu)建相干DOM對(duì)象。

3.根據(jù)DOM對(duì)象的相干屬性，來(lái)進(jìn)行顯示。

結(jié)點(diǎn)

概念：在DOM模型中，全部文檔就是由層次不同的多個(gè)節(jié)點(diǎn)組成，可以說(shuō)結(jié)點(diǎn)代表了全部?jī)?nèi)容。

類型：元素結(jié)點(diǎn)、文本結(jié)點(diǎn)和屬性結(jié)點(diǎn)。

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

         文本節(jié)點(diǎn)和屬性結(jié)點(diǎn)都看做元素結(jié)點(diǎn)的子結(jié)點(diǎn)

我們1般所說(shuō)的結(jié)點(diǎn)指的就是元素結(jié)點(diǎn)。

援用：

1.直接援用結(jié)點(diǎn)

         使用document.getElementById()援用指定id的結(jié)點(diǎn)

         使用document.getElementsByTagName(“a”)，將所有<a>元素結(jié)點(diǎn)放到1個(gè)數(shù)組中返回。

         使用document.getElementsByName(“abc”)，將所有name屬性為”abc”的元素結(jié)點(diǎn)放到1個(gè)數(shù)組中返回。

2.間接援用節(jié)點(diǎn)

         ①援用子結(jié)點(diǎn)

         每一個(gè)結(jié)點(diǎn)都有1個(gè)childNodes集合屬性，類型是數(shù)組對(duì)象，表示該結(jié)點(diǎn)的所有子結(jié)點(diǎn)的集合。這些子結(jié)點(diǎn)依照它在文檔中出現(xiàn)的順序排列，因此可以通過(guò)索引來(lái)順次訪問(wèn)各個(gè)子結(jié)點(diǎn)。

         firstChild,lastChild

         ②援用父節(jié)點(diǎn)

         DOM模型中，除根結(jié)點(diǎn)，每一個(gè)結(jié)點(diǎn)都唯一1個(gè)父節(jié)點(diǎn)，可以用parentNode屬性來(lái)援用。

         ③援用兄弟結(jié)點(diǎn)

         element.nextSibling;  //援用下1個(gè)兄弟結(jié)點(diǎn)

         element.previousSibling;  //援用上1個(gè)兄弟結(jié)點(diǎn)

         如果該結(jié)點(diǎn)沒(méi)有相應(yīng)的兄弟結(jié)點(diǎn)，則屬性返回null.

閱讀器差異問(wèn)題

原則：如果ie和火狐產(chǎn)生差異沖突，盡可能解決。如果太復(fù)雜不想去做，1切以IE為準(zhǔn)。

屬性：

* nodeName:元素結(jié)點(diǎn)返回結(jié)點(diǎn)類型(即，標(biāo)記名稱)；屬性結(jié)點(diǎn)返回undefined；文本節(jié)點(diǎn)返回"#text".

* nodeType:元素節(jié)點(diǎn)返回1，屬性節(jié)點(diǎn)返回2，文本節(jié)點(diǎn)返回3

* nodeValue:元素節(jié)點(diǎn)返回null, 屬性節(jié)點(diǎn)返回undefined,文本結(jié)點(diǎn)返回文本值。

通過(guò)nodeType解決火狐和ie關(guān)于空白文本是不是作為子節(jié)點(diǎn)的差異，比如：

要得到div2的下1個(gè)元素節(jié)點(diǎn)：

                   <divid=div1 >

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

                            <divid=div3 >bbbb</div>

                            <divid=div4 >cccc</div>

                   </div>

//通過(guò)while循環(huán)判斷nodetype類型，解決閱讀器差異問(wèn)題！

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

                                               div2= div2.nextSibling;

                                     }

                                     div3= div2.nextSibling;

處理

屬性節(jié)點(diǎn)

         元素結(jié)點(diǎn).屬性名稱（可以讀寫屬性值）

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

function testAttr() {

                                     varf = document.getElementById("font1");

                                     alert(f.color);

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

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

                                     f.setAttribute("color","green");//可動(dòng)態(tài)傳入操作

}

文本結(jié)點(diǎn)

         要獲得1個(gè)結(jié)點(diǎn)內(nèi)的文本，1般使用innerHTML屬性

         innerHTML屬性不局限于操作1個(gè)結(jié)點(diǎn)，而是可使用HTML片斷直接填充頁(yè)面或直接獲得HTML片斷，大大提高了開發(fā)的靈活性。

function testInnerHTML(){

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

}

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

由于innerHTML屬性可寫，所以可以HTML片斷來(lái)直接填充頁(yè)面

function testInnerHTML(){

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

                dd.innerHTML = "<b>奧運(yùn)會(huì)馬上要開了！<b><h1>甚么時(shí)候啊？</h1><h2>是8.8號(hào)</h2>";

}

改變文檔的層次結(jié)構(gòu)

         使用document.createElement方法創(chuàng)建元素結(jié)點(diǎn)

         vardivElement = document.createElement(“div")

         使用appendChild方法添加結(jié)點(diǎn)

         parentNode.appendChild(childElement);

         使用insertBefore方法插入子結(jié)點(diǎn)

         parentNode.insertBefore(newNode,beforeNode)

         使用replaceChild方法取代子結(jié)點(diǎn)

         parentNode.replaceChild(newNode,oldNode)

         oldNode必須是已存在的，不然會(huì)產(chǎn)生異常。

         使用removeChild方法刪除子結(jié)點(diǎn)

         parentNode.removeChild(childNode);

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

業(yè)務(wù)思想

DOM模型的本質(zhì)是操作文檔對(duì)象的接口，通過(guò)demo深入理解，掌握其基本屬性和方法，也是很簡(jiǎn)單的。

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)