程式師世界 >> 編程語言 >> JAVA編程 >> J2ME >> 深入學習Html DOM樹的操作

深入學習Html DOM樹的操作

編輯：J2ME

你對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>