深入學習Html DOM樹的操作
你對HTML DOM樹的概念是否瞭解， 這裡和大家分享一下，DOM是文件物件模型(Document Object Model），是基於瀏覽器程式設計的一套API介面，W3C出臺的推薦標準，每個瀏覽器都有一些細微的差別，單純的 Javascript要結合DOM才能做DHTML程式設計，才能做出漂亮的效果、應用於WEB。因此，必須要對DOM有一定的認識，才能把Javascript應用於WEB，或你的RIA應用當中，因為 DHTML本質上就是操作DOM樹。
DOM樹
DOM樹的根統一為文件根—document，DOM既然是樹狀結構，那麼他們自然有如下的幾種關係:
◆根結點(document)
◆父結點(parentNode)
◆子結點(childNodes)
兄弟結點兄弟結點
(sibling)(sibling)
例子：
假設網頁的HTML如下
- <html>
- <head>
- <title>never-online'swebsite</title>
- </head>
- <body>
- <div>tutorialofDHTMLandjavascriptprogramming</div>
- </body>
- </html>
我們參照樹的概念，畫出該HTML文件結構的DOM樹：
html
body head
divt itle
文字 文字
從上面的圖示可以看出html有兩個子結點，而html就是這兩個子節點的父結點，head有節點title，title下有一個文字節點，doby下有節點div，div下有一個文字節點。
操作DOM樹
開篇已經說過，DHTML本質就是操作DOM樹。如何操作它呢？假設我要改變上面HTML文件中div結點的文字，如何做？
示例程式碼：
- <html>
- <head>
- <title>never-online'swebsite</title>
- <script>
- functionchangedivText(strText){
- varnodeRoot=document;//這個是根結點
- varnodeHTML=nodeRoot.childNodes[0];//這個是html結點
- varnodeBody=nodeHTML.childNodes[1];//body結點
- varnodeDiv=nodeBody.childNodes[0];//DIV結點
- varnodeText=nodeDiv.childNodes[0];//文字結點'
- nodeText.data=strText;//文字節點有data這個屬性，
- 因此我們可以改變這個屬性，也就成功的操作了DOM樹中的一個結點了
- }
- </script>
- </head>
- <body>
- <div>tutorialofDHTMLandjavascriptprogramming</div>
- <inputonclickinputonclick="changedivText('change?')"
- type="button"value="change"/>
- </body>
- </html>
從上面的示例可以看出，我們可以用上面的這種方法操作DOM樹上的任一節點。
注：
1.跨域除外，跨域通常是在操作frame上，簡單的說，就是兩個frame不屬於同一域名。
2.上面的操作為了演示，採用的方法是從根結點一直到文字結點的遍歷，在DOM方法上，有更簡潔的方法，這些以後會有更多示例加以說明。