溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何深入學習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方法上，有更簡潔的方法，這些以后會有更多示例加以說明。
關于如何深入學習Html DOM樹的操作就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
