首頁 > 開發者 > JavaScript
DOM是一種結構化物件模型提供了標籤對象通用的訪問方式，將HTML檔案視為一個節點樹，每一個標籤和文字都是一個節點，可以訪問每個節點和節點內容。
這樣我們就可以通過DOM提供給的方法、介面來訪問HTML內容，而不需要單個元素一個一個的查詢。
優點：
跨平台和程式語言的程式介面
DOM提供應用程式環境的一種標準程式處理介面，這是一種HTML和XML檔案的標準API，可以再網路上交換資料。
支援多種檔案格式
支援多種程式語言
DOM提供了幾個屬性可以容易的訪問樹結構中的節點。如下
以parentNode、childNodes、previousSibling為例進行說明，看下面代碼
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>無標題文檔</title><script language="javascript">//顯示當前節點的父節點function showParentNode(){//獲得當前節點對象var myObj=document.getElementById("lilongsheng");//尋找父節點var parent=myObj.parentNode;//顯示父節點名alert(parent.nodeName);}//顯示孩子節點列表，傳回型別為NodeListfunction showchild(){//獲得當前節點對象var myObj=document.getElementById("lilongsheng");//尋找節點的子節點列表var child=myObj.childNodes;//迴圈顯示子節點列表for (var i=0;i<child.length;i++){alert(child[i].nodeName);}}//顯示下一個兄弟節點function showSibling(){//獲得當前節點對象var myObj=document.getElementById("lilongsheng");//尋找下一個兄弟節點var sibling=myObj.nextSibling;//顯示alert(sibling.nodeName);}</script></head><body><form><ul id="lilong"><li id="lilongsheng"><a href="#" >標題1</a><a href="#" >標題2</a><a href="#" >標題3</a><a href="#" >標題4</a></li><hr/></ul><input type="button" onclick="showParentNode()" value="擷取父標籤名" /><input type="button" onclick="showchild()" value="擷取子標籤名" /><input type="button" onclick="showSibling()" value="擷取兄弟標籤名" /></form></body></html>
分別單擊三個選項按鈕，可以獲得結果如下：
分別獲得當前標籤的父標籤、子標籤、兄弟標籤，其餘方法不再累述，可以使用這些簡單的方法實現對DOM文檔模型裡的元素進行增、刪、改、查，操作DOM文檔。
待續……
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
