在前端展現(xiàn)越來越豐富的今天,DOM對象可以說變得非常重要(其實一直都重要),下面轉(zhuǎn)摘一篇寫的不錯的文檔,供大家以后查閱:

使用data、nodeValue和src屬性 DOM 提供了2個屬性用于修改文本節(jié)點的內(nèi)容,它們是data和nodeVaule。2個屬性實現(xiàn)的功能相同,語法是:object.data="new value"或者object.nodeVaule="new value",其中object代表頁面中的文本項節(jié)點。如果修改圖形文件的內(nèi)容,語法是:object.src="new value",其中object表示頁面中的img標(biāo)記節(jié)點。來看看下面的例子:


上述代碼首先顯示頁面的初始內(nèi)容以及節(jié)點p1Node的相關(guān)屬性值,然后對節(jié)點bodyNode的第1個孩子節(jié)點的nodeValue屬性進(jìn)行賦值修改其文本內(nèi)容,對節(jié)點p3Node的第2個孩子節(jié)點(也就是了img標(biāo)記)的src屬性進(jìn)行賦值修改圖形的內(nèi)容。 使用createElement方法 createElement 方法的功能是在文檔中創(chuàng)建一個孤立HTML標(biāo)記節(jié)點。孤立節(jié)點既沒有孩子節(jié)點也沒有雙親節(jié)點,而且與文檔中的現(xiàn)存節(jié)點也互不關(guān)聯(lián)。被創(chuàng)建的孤立HTML標(biāo)記節(jié)點的唯一信息就是它代表的HTML標(biāo)記,比如< P>、< FONT>和< TABLE>。CreateElement的語法為document.createElement(HTMLTag),HTMLTag表示要創(chuàng)建的 HTML標(biāo)記,返回值是創(chuàng)建的孤立HTML標(biāo)記節(jié)點。來看看下面的例子:


上述代碼在文檔中創(chuàng)建了4個孤立HTML標(biāo)記節(jié)點tableObj、tbodyObj、trObj和tdObj,它們就象太空中4顆人造衛(wèi)星一樣,彼此間以及和文檔中的現(xiàn)有節(jié)點間都互不關(guān)聯(lián)。創(chuàng)建孤立節(jié)點的目的不是為了讓它真正孤立,隨后我們會介紹如何將創(chuàng)建的孤立節(jié)點彼此相連,并添加到文檔的DOM Tree結(jié)構(gòu)中。 使用cloneNode方法 cloneNode方法的功能是通過克隆(也就是復(fù)制)文檔中一個現(xiàn)存節(jié)點的方式創(chuàng)建文檔的一個孤立節(jié)點。根據(jù)被克隆節(jié)點的類型,新創(chuàng)建的孤立節(jié)點或者是HTML標(biāo)記節(jié)點,或者是包含字符串信息的文本項節(jié)點。 cloneNode的語法為oldNode.createNode(false)或者oldNode.createNode(true),oldNode 表示被克隆的節(jié)點,返回值是新創(chuàng)建的節(jié)點,false表示僅僅克隆oldNode,true表示克隆oldNode并包含其下屬節(jié)點。來看看下面的例子:


上述代碼中值得注意的是對文本項節(jié)點的處理方式: 1、首先,使用語句row1cell1Obj = document.createTextNode("This is row 1, cell 1")創(chuàng)建單元格(1,1)所在節(jié)點; 2、然后使用語句row1cell1Obj.cloneNode(false)分別創(chuàng)建其他單元格節(jié)點; 3、最后,使用語句node.nodeValue = string分別為不同單元格賦值。使用appendChild方法 appendChild 方法的功能是在2個節(jié)點間建立起父子關(guān)系,如果作為父親的節(jié)點已經(jīng)具有了孩子節(jié)點,那么新添加的孩子節(jié)點被追加為最后一個孩子,也就是 lastChild。appendChild的語法是fatherObj.appendChild(childObj),返回值是被追加的孩子節(jié)點。來看看下面的例子:


上面的代碼演示了一個Table的動態(tài)創(chuàng)建過程。首先創(chuàng)建Table的各個行、列以及單元格的節(jié)點,然后使用appendChild將這些節(jié)點進(jìn)行連接形成一個Table,最后通過語句bodyNode.appendChild(tableObj)將Table裝載進(jìn)文檔中。 使用applyElement方法 applyElement 方法的功能是將一個節(jié)點與它的孩子節(jié)點和父親節(jié)點脫離,然后將另外一個節(jié)點連接到這個節(jié)點,最終使它們成為父子關(guān)系。applyElement的語法是 childObj.applyElement(fatherObj),返回值是被連接的孩子節(jié)點。 我們注意到,applyElement和appendChild實現(xiàn)的目的基本相同,都是在2個節(jié)點間建立父子關(guān)系,但有2個區(qū)別: 1、applyElement方法只能操縱HTML標(biāo)記節(jié)點,不能處理文本項節(jié)點。appendNode則能處理2種節(jié)點。 2、appendNode對2個節(jié)點的連接方式是從父到子,applyElement則是從子到父。 來看看下面的例子:


上面的代碼同樣演示了一個Table的動態(tài)創(chuàng)建過程。首先創(chuàng)建Table的各個行、列以及單元格的節(jié)點,然后混合使用applyElement和 appendChild將這些節(jié)點進(jìn)行連接形成一個Table,最后通過語句bodyNode.appendChild(tableObj)將Table 裝載進(jìn)文檔中 使用insertBefore方法 insertBefore方法的功能和 appendChild相似,都是將一個孩子節(jié)點連接到一個父親節(jié)點,但insertBefore方法允許我們指定孩子節(jié)點的位置。 insertBefore的語法是fatherObj.insertBefore(childObj, brotherObj),返回值是被連接的孩子節(jié)點。執(zhí)行后,childObj的位置在brotherObj之前。來看看下面的例子:


上面的代碼又一次演示了一個Table的動態(tài)創(chuàng)建過程。首先創(chuàng)建Table的各個行、列以及單元格的節(jié)點,然后混合使用insertBefore將這些節(jié)點進(jìn)行連接形成一個Table,最后通過語句bodyNode. insertBefore (tableObj)將Table裝載進(jìn)文檔中。可以看到,如果省略掉第2個參數(shù)brotherObj采用fatherObj.insertBefore (childObj)方式,那么一定是在要連入的父親節(jié)點還沒有孩子節(jié)點的情況下,這時,就和appendNode方法的功能完全一樣了。 使用removeNode方法 removeNode 方法的功能是刪除一個節(jié)點,語法為node.removeNode(false)或者node.removeNode(true),返回值是被刪除的節(jié)點。removeNode(false)表示僅僅刪除指定節(jié)點,然后這個節(jié)點的原孩子節(jié)點提升為原雙親節(jié)點的孩子節(jié)點。removeNode(true)表示刪除指定節(jié)點及其所有下屬節(jié)點。被刪除的節(jié)點成為了孤立節(jié)點,不再具有有孩子節(jié)點和雙親節(jié)點。來看看下面的例子:


上述代碼首先顯示頁面的初始內(nèi)容以及bodyNode的每個孩子節(jié)點的nodeName屬性值,然后僅僅刪除p3Node。刪除p3Node前, bodyNode有6個孩子節(jié)點,p3Node有4個孩子節(jié)點。刪除p3Node后,節(jié)點p3Node的4個孩子節(jié)點提升為bodyNode的孩子節(jié)點,這樣bodyNode就有了9個節(jié)點。p3Node被刪除后返回值為deletedNode,它的nodeName屬性值為P,孩子節(jié)點數(shù)為0,也就是說,它成為一個孤立節(jié)點。 現(xiàn)在我們將上述代碼中的deletedNode = p3Node.removeNode(false)修改為deletedNode = p3Node.removeNode(true),你會看到,刪除p3Node后,bodyNode的孩子節(jié)點數(shù)變?yōu)?。使用replaceNode方法 replaceNode方法的功能是用新創(chuàng)建的節(jié)點替換一個節(jié)點及其下屬節(jié)點,語法為oldNode.replaceNode(newNode),返回值是被替換的節(jié)點。來看看下面的例子:


上述代碼首先顯示頁面的初始內(nèi)容以及bodyNode的每個孩子節(jié)點的nodeName屬性值,然后用新創(chuàng)建的文本項節(jié)點替換p3Node。替換后, bodyNode的孩子節(jié)點數(shù)目沒有變,原來的P節(jié)點替換為文本項節(jié)點。變量replaceNode表示被替換的節(jié)點p3Node,它仍包含原來的4個孩子節(jié)點。 replaceNode方法的另一個功能是刪除節(jié)點及其下屬節(jié)點,就象前面介紹的removeNode(true)一樣。這時,我們只需將replaceNode方法的參數(shù)設(shè)置為一個現(xiàn)存的節(jié)點就可以。現(xiàn)在,我們將上述代碼中的b = document.createTextNode("New Body Page")修改為b = p2Node,你會看到,p3Node及其下屬節(jié)點被刪除了,沒有替換節(jié)點生成,bodyNode的孩子節(jié)點數(shù)變?yōu)?。 如果replaceNode方法的參數(shù)為空,也就是執(zhí)行replaceNode(),那么將導(dǎo)致瀏覽器腳本運(yùn)行錯誤。 使用swapNode方法 swapNode方法的功能是交換2個節(jié)點(包括其下屬節(jié)點)在文檔Tree中的位置,語法為firstNode.swapNode(secondNode),返回值是節(jié)點firstNode。來看看下面的例子:


上述代碼首先顯示頁面的初始內(nèi)容以及bodyNode的每個孩子節(jié)點的nodeName屬性值,然后交換p3Node和p2Node的位置。交換后,bodyNode的孩子節(jié)點數(shù)目沒有變,變量swappedNode表示p3Node,它仍包含原來的4個孩子節(jié)點。 swapNode 方法的另一個功能是替換節(jié)點及其下屬節(jié)點,就象前面介紹的replaceNode方法一樣。這時,我們只需將replaceNode方法的參數(shù)設(shè)置為一個新創(chuàng)建的節(jié)點就可以。現(xiàn)在,我們將上述代碼中的b = p2Node修改為b = document.createTextNode("This is a swapped in text"),你會看到,p3Node及其下屬節(jié)點被新創(chuàng)建的文本項節(jié)點所替換,原來的節(jié)點類型P變?yōu)榱宋谋卷椆?jié)點類型#text。

轉(zhuǎn)摘自http://bbs.javascript.com.cn/simple/index.php?t180.html