DOM及DOM技術(shù)介紹.

1、DOM及DOM技術(shù)介紹2008-12-02文章來源：瀏覽次數(shù)：禺1674本文概述了一些強(qiáng)大的，基本的DOM 級(jí)別一中的方法以及如何在JavaScript中使用它們。你將會(huì)學(xué)習(xí)到如何動(dòng)態(tài)地創(chuàng)建，訪問，控制以及移除HTML元素。這里提到的DOM方法，并非是HTML專有的；它們?cè)?XML中同樣適用。這里所有的示例，在任何全面支持 DOM Ievel1的瀏覽器里都能正常工作；例如Mozilla瀏覽器或者其他基于Mozilla的瀏覽器，像網(wǎng)景公司的下一代導(dǎo)航者(Navigatior )瀏覽器等。這里的示例代碼在IE5中也能正常工作。(這里所提到的DOM方法是文檔對(duì)象模型規(guī)范(級(jí)別一)的核心的一部分。DO

2、M 級(jí)別一包括對(duì)文檔進(jìn)行訪問和處理的方法( DOM 1 核心)和專門為 HTML文檔定 義的方法。)DOM簡(jiǎn)介：DOM的全稱是文檔對(duì)象模型(即Document Object Model)，它在本質(zhì)上是一種文檔平臺(tái)。文檔對(duì)象模型(DOM )是表示文檔(比如 HTML和XML )和訪問、操作構(gòu)成文 檔的各種元素的應(yīng)用程序接口( API )。支持Javascript的所有瀏覽器都支持 DOM。DOM實(shí)際上是一個(gè)能夠讓程序和腳本動(dòng)態(tài)訪問和更新文檔內(nèi)容、結(jié)構(gòu)和樣式的一種語言平臺(tái)。這段文字是通過一個(gè)實(shí)例代碼來介紹了DOM的。那么我們從下面的HTML示例來開始吧。這段示例使用了DOM 級(jí)別一的方法，從 Ja

3、vaScript 動(dòng)態(tài)創(chuàng)建了一個(gè) HTML表格。它創(chuàng)建了一個(gè)包含了四個(gè)單元的小表格，并且在每個(gè)單元中含有文本。單元中文字內(nèi)容是這個(gè)單元式y(tǒng)行x列”來展示單元格在表格中所處的位置。 樣例代碼-使用JavaScript 和DOM 接口創(chuàng)建一個(gè) HTML表格function start() / 獲得從body的引用var mybody=document.getElementsByTagName(body).item(0);/ 創(chuàng)建一個(gè) TABLE的元素mytable = document.createElement(TABLE);/ 創(chuàng)建一個(gè) TBODY的元素mytablebody = docume

4、nt.createElement(TBODY);/ 創(chuàng)建所有的單元格for(j=0;j2;j+) / 創(chuàng)建一個(gè)TR元素mycurrent_row=document.createElement(TR);for(i=0;iv/headvbody onload=start()注意我們創(chuàng)建元素和文本節(jié)點(diǎn)的順序：1. 首先我們創(chuàng)建了 TABLE元素。2. 然后，我們創(chuàng)建了 TABLE的子元素-TBODY 。3. 然后，我們使用循環(huán)語句創(chuàng)建了TBODY的子元素-TR 。4. 對(duì)于每一個(gè)TR元素，我們使用一個(gè)循環(huán)語句創(chuàng)建它的子元素-TD 。5. 對(duì)于每一個(gè)TD元素，我們創(chuàng)建單元格內(nèi)的文本節(jié)點(diǎn)。現(xiàn)在，我們創(chuàng)建

5、了TABLE，TBODY，TR，TD等元素，然后創(chuàng)建了文本節(jié)點(diǎn)；接下來，我們將每一個(gè)對(duì)象接在各自的父節(jié)點(diǎn)上，使用逆序：1. 首先，我們將每一個(gè)文本節(jié)點(diǎn)接在TD元素上mycurrent_cell.appendChild(currenttext);2. 然后，我們將每一個(gè) TD元素接在他的父 TR元素上。mycurrent_row.appendChild(mycurrent_cell);3. 然后，我們將每一個(gè) TR元素接在他們的父TBODY元素上。mytablebody.appendChild(mycurrent_row);4. 下一步,我們將TBODY元素接在他的父 TABLE元素上mytab

6、le.appendChild(mytablebody);5. 最后，我們將TABLE元素接在他的父元素BODY上。mybody.appendChild(mytable);請(qǐng)記住這個(gè)機(jī)制。你將會(huì)在W3C DOM 編程中經(jīng)常使用它。首先，你從上到下的創(chuàng)建元素；然后你從下向上的將子元素接在他們的父元素上。下面是由javascript代碼生成的HTML代碼：vTABLE border=5cell is row 0 column 0cell is row 0 column 1cell is row 1 column 0cell is row 1 column 1v/TABLEF面是由代碼生成的 TABL

7、E及其子元素的 DOM對(duì)象樹:你可以只用一些DOM方法來創(chuàng)建這個(gè)表格和它內(nèi)部的子元素。請(qǐng)?jiān)谀X海中時(shí)刻保留你想要?jiǎng)?chuàng)建的數(shù)據(jù)結(jié)構(gòu)的樹之模型，這樣有利于更簡(jiǎn)便的寫出必須的代碼。 在圖1的TABLE 樹中，TABLE有一個(gè)子元素 TBODY。TBODY有兩個(gè)子元素。每一個(gè) TR又含有兩個(gè)子元 素(TD )。最后，每一個(gè) TD有一個(gè)子元素-文本節(jié)點(diǎn)?；?DOM 方法-Sample2.htmlgetEleme ntByTagName 是文檔接口( Docume nt in terface)和元素接口(Eleme ntin terface )的中的方法，所以不管是根文檔對(duì)象還是所有的元素對(duì)象都含有方法ge

8、tElementByTagName用來通過它們的標(biāo)簽名稱(tag name )來獲得某些元素的一系 列子元素。你可以使用的方法是：eleme ntgetEleme ntsByTagName(ag nam。getEleme ntsByTagName返回一個(gè)有特定標(biāo)簽名稱(tag name )的子元素列表。從 這個(gè)子元素列表中，你可以通過調(diào)用item和你想得到的元素的下標(biāo)，來獲得單個(gè)元素。列表中第一個(gè)元素的下標(biāo)是0。上面的方法很簡(jiǎn)單，但是當(dāng)你操作一個(gè)巨大的數(shù)據(jù)結(jié)構(gòu)時(shí)還是應(yīng)該小心一些。ok，我們下一個(gè)話題中要繼續(xù)對(duì)我們的表格例子進(jìn)行修改。下面的示例更加簡(jiǎn)單，它意圖展示一些基礎(chǔ)的方法： 樣例代碼-使用

9、JavaScript 和DOM 接口操作 HTML表格function start() /獲得所有的body元素列表(在這里將只有一個(gè))myDocumentElements=document.getElementsByTagName(body);/我們所需要body元素是這個(gè)列表的第一個(gè)元素myBody=myDocumentElements.item(0);II現(xiàn)在，讓我們獲得body的子元素中所有的p元素myBodymyBodyElements=myBody.getElementsByTagName(p);/我們所需要的是這個(gè)列表中的第二個(gè)單元元素myP=myBodyElements.ite

10、m(1); v/headhihelloHTML在這個(gè)例子中，我們?cè)O(shè)置變量myP指向DOM對(duì)象body中的第二個(gè)p元素:1. 首先，我們使用下面的代碼獲得所有的body元素的列表，因?yàn)樵谌魏魏戏ǖ奈臋n中都只有一個(gè)body元素，所以這個(gè)列表是只包含一個(gè)單元的。document.getElementsByTagName(body)2. 下一步，我們?nèi)〉昧斜淼牡谝粋€(gè)元素，它本身就會(huì)body元素對(duì)象。myBody=myDocumentElements.item(0);3. 然后，我們通過下面代碼獲得body的子元素中所有的p元素myBodyElements=myBody.getElementsByTag

11、Name(p);4. 最后，我們從列表中取第二個(gè)單元元素。myP=myBodyElements.item(1);document一 BODYmyPhello一旦你取得了 HTML元素的DOM對(duì)象，你就可以設(shè)置它的屬性了。比如，如果你希 望設(shè)置背景色屬性，你只需要添加：myP.style.background=rgb(255,0,0);/設(shè)置inline的背景色風(fēng)格使用 document.createTextNode(.)創(chuàng)建文本節(jié)點(diǎn)使用文檔對(duì)象來調(diào)用一個(gè)createTextNode方法并創(chuàng)建你自己的文本節(jié)點(diǎn)。你只需要傳遞文字內(nèi)容給這個(gè)函數(shù)。返回的值就是一個(gè)展示那個(gè)文本節(jié)點(diǎn)信息的對(duì)象。myTex

12、tNode=document.createTextNode(world);這表示你已經(jīng)創(chuàng)建了一個(gè)TEXT NODE (個(gè)文字片斷)類型的節(jié)點(diǎn)，并且它的內(nèi)容是“world ”，任何你對(duì)myTextNode的引用都指向這個(gè)節(jié)點(diǎn)對(duì)象。如果想將這個(gè)文本插入到HTML頁面中，你還需要將它作為其他節(jié)點(diǎn)元素的子元素。使用即pendChild(.)插入元素那么，通過調(diào)用 myP.appe ndChild( node_eleme nt)你可以將這個(gè)元素設(shè)置成為第二個(gè)P的一個(gè)新的子元素。myP.appendChild(myTextNode);在測(cè)試了這個(gè)例子之后，我們注意到，hello和world單詞被組合在了一

13、個(gè)：helloworld 。事實(shí)上，當(dāng)你看到HTML頁面時(shí)，hello和world 兩個(gè)文字節(jié)點(diǎn)看起來更像是一個(gè)節(jié)點(diǎn)。但是請(qǐng)記住它們?cè)谖臋n模型中的形式-是兩個(gè)節(jié)點(diǎn)。第二個(gè)節(jié)點(diǎn)是一個(gè)TEXT_NODE 類型的新節(jié)點(diǎn)，也是第二個(gè) P標(biāo)簽的第二個(gè)子元素。下面的圖標(biāo)將在文檔樹 種展示最近創(chuàng)建的文本節(jié)點(diǎn)對(duì)象。createTextNode 和appendChild是在單詞hello和world 之間設(shè)置空格的一個(gè)簡(jiǎn)單方法。另外一個(gè)重要的注意事項(xiàng)是：appe ndChild方法將把新的子節(jié)點(diǎn)接在最后一個(gè)子節(jié)點(diǎn)之后，正如world被加在了 hello之后。所以如果你想在hello和world中間添加一個(gè)文本節(jié)

14、點(diǎn)的話，你應(yīng)該使用insertBefore來提到即pendChild.使用文檔對(duì)象和createElement(.) 方法創(chuàng)建新的元素你可以使用createElement來創(chuàng)建新的HTML元素或者任何其它你想要的元素。比如，如果你想要?jiǎng)?chuàng)建一個(gè)新的P作為BODY的子元素，你可以使用前面例子的myBody并給它接上一個(gè)新的元素節(jié)點(diǎn)。使用docume nt.createEleme nt(tag name)可以方便的創(chuàng)建一個(gè)節(jié)點(diǎn)。如下：myNewPTAGnode=document.createElement(p);myBody.appendChild(myNewPTAGnode);documentBO

15、DYhelloworld使用removeChild(.)方法移除節(jié)點(diǎn)每一個(gè)節(jié)點(diǎn)都可以被移除下面的一行代碼移除了包含在myP(第二個(gè)p元素)下面的文本節(jié)點(diǎn) world。myP.removeChild(myTextNode);最后你可以將myTextNode(那個(gè)包含了 world單詞的節(jié)點(diǎn))添加給我們最后創(chuàng)建的P元素：myNewPTAGnode.appendChild(myTextNode);被修改的對(duì)象樹的最后的狀態(tài)如下:documentBODYhelloHiworld動(dòng)態(tài)創(chuàng)建一個(gè)表格(回到Sample1.html)這一段落的剩余部分我們將繼續(xù)修改我們sample1.html例中創(chuàng)建的表格的對(duì)

16、象樹的結(jié)構(gòu)。F面的圖展示了我們?cè)谑緩?fù)習(xí)一下HTML表格結(jié)構(gòu)創(chuàng)建元素節(jié)點(diǎn)并將他們插入到文檔樹中sample1.html中創(chuàng)建表格的基本步驟是：獲得body對(duì)象(文檔對(duì)象的第一個(gè)元素)創(chuàng)建所有元素。最后，根據(jù)表格結(jié)構(gòu)(上面圖中所示)將每一個(gè)孩子節(jié)點(diǎn)拼接起來。下面的一段源碼是經(jīng)過修改的 sample1.html在start函數(shù)的最后，有一行新代碼。使用另一個(gè)DOM方法(setAttribute )來設(shè)置表格的邊界屬性。setAttribute有兩個(gè)參數(shù)：屬性的名稱和屬性的值。你可以使用這個(gè)方法來設(shè)置任意元素的任意屬性。 示例代碼-使用 Javascript 和 DOM Interfaces 來處理

17、HTMLfunction start() /獲得body的引用var mybody=document.getElementsByTagName(body).item(O);/創(chuàng)建一個(gè)標(biāo)簽名稱為 TABLE的元素 mytable = document.createElement(TABLE);/創(chuàng)建一個(gè)標(biāo)簽名稱為在TBODY的元素mytablebody = document.createElement(TBODY);/創(chuàng)建所有的單元格for(j=0;j2;j+) /創(chuàng)建一個(gè)標(biāo)簽名稱為在TR的元素mycurrent_row=document.createElement(TR);for(i=0;iv

18、/headvbody onload=start()使用CSS和DOM 來操作表格從表格中獲得一個(gè)文字節(jié)點(diǎn)示例介紹了兩個(gè)新的DOM屬性。首先，使用childNodes屬性來獲得 mycel的孩子節(jié)點(diǎn)列表。childNodes列表包括所有的孩子節(jié)點(diǎn)，無論它們的名稱或類型是什么。像getEleme ngByTagName樣，它返回了一個(gè)節(jié)點(diǎn)列表。不同的是，getEleme ntByTagName只返回指定標(biāo)簽名稱的元素。一旦你獲得了返回的列表，你可以使用item(x)方法來使用指定的元素。這個(gè)例子在表格的第二行第二個(gè)單元格中的 myceltext中保存了一個(gè)文字節(jié)點(diǎn)。然后，運(yùn)行這個(gè)例子并觀察結(jié)果，他

19、創(chuàng)建了一個(gè)新的文字節(jié)點(diǎn)，這個(gè)文字節(jié)點(diǎn)的內(nèi)容是myceltext 的值，并且將這個(gè)文字節(jié)點(diǎn)作為了BODY元素的一個(gè)孩子。如果你的對(duì)象是一個(gè)文字節(jié)點(diǎn)，你可以使用data屬性來回收(retrieve )節(jié)點(diǎn)的文字內(nèi)容mybody=document.getElementsByTagName(body).item(O);mytable=mybody.getElementsByTagName(table).item(O); mytablebody=mytable.getElementsByTagName(tbody).item(0);myrow=mytablebody.getElementsByTagNa

20、me(tr).item(1); mycel=myrow.getElementsByTagName(td).item(1);/ mycel的孩子節(jié)點(diǎn)列表的第一個(gè)元素myceltext=mycel.childNodes.item(0);/ currenttext的內(nèi)容是 myceltext 的內(nèi)容currenttext=document.createTextNode(myceltext.data);mybody.appendChild(currenttext);獲得一個(gè)屬性的值在sample1 的最后我們?cè)趍ytable 對(duì)象上調(diào)用了 setAttribute。這個(gè)調(diào)用是用來設(shè)置表格的邊界屬性的。然后是用了getAttribute方法來獲得一個(gè)屬性的值：mytable.getAttribute(border);通過改變樣式屬性來隱藏一列一旦你在你的javascript變量中保存了一個(gè)對(duì)象，你就可以直接為它設(shè)置樣式屬性了。下面的代碼是修改后的sample1.html，在這里，第二列的每一個(gè)單元格都被隱藏了。而且第一列中的每一個(gè)單