深入學(xué)習(xí)Html DOM樹的操作
你對(duì)HTML DOM樹的概念是否了解， 這里和大家分享一下，DOM是文檔對(duì)象模型(Document Object Model），是基于瀏覽器編程的一套API接口，W3C出臺(tái)的推薦標(biāo)準(zhǔn)，每個(gè)瀏覽器都有一些細(xì)微的差別，單純的 Javascript要結(jié)合DOM才能做DHTML編程，才能做出漂亮的效果、應(yīng)用于WEB。因此，必須要對(duì)DOM有一定的認(rèn)識(shí)，才能把Javascript應(yīng)用于WEB，或你的RIA應(yīng)用當(dāng)中，因?yàn)?DHTML本質(zhì)上就是操作DOM樹。
DOM樹
DOM樹的根統(tǒng)一為文檔根—document，DOM既然是樹狀結(jié)構(gòu)，那么他們自然有如下的幾種關(guān)系:
◆根結(jié)點(diǎn)(document)
◆父結(jié)點(diǎn)(parentNode)
◆子結(jié)點(diǎn)(childNodes)
兄弟結(jié)點(diǎn)兄弟結(jié)點(diǎn)
(sibling)(sibling)
例子：
假設(shè)網(wǎng)頁(yè)的HTML如下
- <html>
- <head>
- <title>never-online'swebsite</title>
- </head>
- <body>
- <div>tutorialofDHTMLandjavascriptprogramming</div>
- </body>
- </html>
我們參照樹的概念，畫出該HTML文檔結(jié)構(gòu)的DOM樹：
html
body head
divt itle
文本 文本
從上面的圖示可以看出html有兩個(gè)子結(jié)點(diǎn)，而html就是這兩個(gè)子節(jié)點(diǎn)的父結(jié)點(diǎn)，head有節(jié)點(diǎn)title，title下有一個(gè)文本節(jié)點(diǎn)，doby下有節(jié)點(diǎn)div，div下有一個(gè)文本節(jié)點(diǎn)。
操作DOM樹
開篇已經(jīng)說過，DHTML本質(zhì)就是操作DOM樹。如何操作它呢？假設(shè)我要改變上面HTML文檔中div結(jié)點(diǎn)的文本，如何做？
示例代碼：
- <html>
- <head>
- <title>never-online'swebsite</title>
- <script>
- functionchangedivText(strText){
- varnodeRoot=document;//這個(gè)是根結(jié)點(diǎn)
- varnodeHTML=nodeRoot.childNodes[0];//這個(gè)是html結(jié)點(diǎn)
- varnodeBody=nodeHTML.childNodes[1];//body結(jié)點(diǎn)
- varnodeDiv=nodeBody.childNodes[0];//DIV結(jié)點(diǎn)
- varnodeText=nodeDiv.childNodes[0];//文本結(jié)點(diǎn)'
- nodeText.data=strText;//文本節(jié)點(diǎn)有data這個(gè)屬性，
- 因此我們可以改變這個(gè)屬性，也就成功的操作了DOM樹中的一個(gè)結(jié)點(diǎn)了
- }
- </script>
- </head>
- <body>
- <div>tutorialofDHTMLandjavascriptprogramming</div>
- <inputonclickinputonclick="changedivText('change?')"
- type="button"value="change"/>
- </body>
- </html>
從上面的示例可以看出，我們可以用上面的這種方法操作DOM樹上的任一節(jié)點(diǎn)。
注：
1.跨域除外，跨域通常是在操作frame上，簡(jiǎn)單的說，就是兩個(gè)frame不屬于同一域名。
2.上面的操作為了演示，采用的方法是從根結(jié)點(diǎn)一直到文本結(jié)點(diǎn)的遍歷，在DOM方法上，有更簡(jiǎn)潔的方法，這些以后會(huì)有更多示例加以說明。
【編輯推薦】
