HTML DOM定義了訪問和操作HTML文檔的標準方法。HTML DOM 把HTML文檔呈現爲帶有元素、屬性和文本的樹結構(節點樹)。
HTML DOM簡介
HTML文檔對象模型(HTML Document Object Model)定義了訪問和處理HTML文檔的標準方法。
您應當具備的基礎知識
在繼續學習之前,您需要對下面的知識有基本的瞭解:
◆HTML / XHTML
◆JavaScript
什麼是DOM?
通過JavaScript,您可以重構整個HTML文檔。您可以添加、移除、改變或重排頁面上的項目。要改變頁面的某個東西,JavaScript就需要對HTML文檔中所有元素進行訪問的入口。這個入口,連同對HTML元素進行添加、移動、改變或移除的方法和屬性,都是通過文檔對象模型來獲得的(DOM)。
在1998年,W3C發佈了第一級的DOM規範。這個規範允許訪問和操作HTML頁面中的每一個單獨的元素。所有的瀏覽器都執行了這個標準,因此,DOM的兼容性問題也幾乎難覓蹤影了。DOM可被JavaScript用來讀取、改變HTML、XHTML以及XML文檔。DOM被分爲不同的部分(核心、XML及HTML)和級別(DOM Level 1/2/3):
◆Core DOM:定義了一套標準的針對任何結構化文檔的對象。
◆XML DOM:定義了一套標準的針對XML文檔的對象。
◆HTML DOM:定義了一套標準的針對HTML文檔的對象。
HTML DOM 節點
HTML文檔中的每個成分都是一個節點。
節點
根據DOM,HTML文檔中的每個成分都是一個節點。DOM是這樣規定的:
◆整個文檔是一個文檔節點
◆每個HTML標籤是一個元素節點
◆包含在HTML元素中的文本是文本節點
◆每一個HTML屬性是一個屬性節點
◆註釋屬於註釋節點
Node層次
節點彼此都有等級關係。HTML文檔中的所有節點組成了一個文檔樹(或節點樹)。HTML文檔中的每個元素、屬性、文本等都代表着樹中的一個節點。樹起始於文檔節點,並由此繼續伸出枝條,直到處於這棵樹最低級別的所有文本節點爲止。下面這個圖片表示一個文檔樹(節點樹):
HTML DOM 節點樹
一棵節點樹中的所有節點彼此都是有關係的。
文檔樹(節點數)
- 請看下面這個HTML文檔:
- <html>
- <head>
- <title>DOM Tutorial</title>
- </head>
- <body>
- <h1>DOM Lesson one</h1>
- <p>Hello world!</p>
- </body>
- </html>
上面所有的節點彼此間都存在關係。除文檔節點之外的每個節點都有父節點。舉例,<head> 和 <body>的父節點是<html>節點,文本節點"Hello world!"的父節點是<p>節點。
大部分元素節點都有子節點。比方說,<head>節點有一個子節點:<title>節點。<title>節點也有一個子節點:文本節點"DOM Tutorial"。當節點分享同一個父節點時,它們就是同輩(同級節點)。比方說,<h1>和 <p>是同輩,因爲它們的父節點均是<body>節點。
節點也可以擁有後代,後代指某個節點的所有子節點,或者這些子節點的子節點,以此類推。比方說,所有的文本節點都是<html>節點的後代,而第一個文本節點是<head>節點的後代。節點也可以擁有先輩。先輩是某個節點的父節點,或者父節點的父節點,以此類推。比方說,所有的文本節點都可把<html>節點作爲先輩節點。
HTML DOM訪問節點
通過DOM,您可訪問HTML文檔中的每個節點。
查找並訪問節點
你可通過若干種方法來查找您希望操作的元素:
◆通過使用 getElementById() 和 getElementsByTagName() 方法。
◆通過使用一個元素節點的parentNode、firstChild以及lastChild屬性。
getElementById() 和 getElementsByTagName()
getElementById() 和 getElementsByTagName()這兩種方法,可查找整個HTML文檔中的任何HTML元素。
這兩種方法會忽略文檔的結構。假如您希望查找文檔中所有的<p>元素,getElementsByTagName()會把它們全部找到,不管<p>元素處於文檔中的哪個層次。同時,getElementById()方法也會返回正確的元素,不論它被隱藏在文檔結構中的什麼位置。這兩種方法會像您提供任何你所需要的HTML元素,不論它們在文檔中所處的位置!getElementById()可通過指定的ID來返回元素:
- document.getElementById("ID");
註釋:getElementById() 無法工作在XML中。在XML文檔中,您必須通過擁有類型id的屬性來進行搜索,而此類型必須在XML DTD中進行聲明。
getElementsByTagName() 方法會使用指定的標籤名返回所有的元素(作爲一個節點列表),這些元素是您在使用此方法時所處的元素的後代。getElementsByTagName() 可被用於任何的HTML元素:
getElementsByTagName() 語法
- document.getElementsByTagName("標籤名稱");
或者:
- document.getElementById('ID').getElementsByTagName("標籤名稱");
實例 1
下面這個例子會返回文檔中所有<p>元素的一個節點列表:
- document.getElementsByTagName("p");
實例 2
下面這個例子會返回所有<p>元素的一個節點列表,且這些<p>元素必須是id爲"maindiv"的元素的後代:
- document.getElementById('maindiv').getElementsByTagName("p");
節點列表(nodeList)
當我們使用節點列表時,通常要把此列表保存在一個變量中,就像這樣:
- var x=document.getElementsByTagName("p");
現在,變量x包含着頁面中所有<p>元素的一個列表,並且我們可以通過它們的索引號來訪問這些<p>元素。註釋:索引號從0開始。您可以通過使用length屬性來循環遍歷節點列表:
- var x=document.getElementsByTagName("p");
- for (var i=;i<x.length;i++)
- {
- // do something with each paragraph
- }
您也可以通過索引號來訪問某個具體的元素。要訪問第三個<p>元素,您可以這麼寫:
- var y=x[2];
parentNode、firstChild以及lastChild
這三個屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結構,在文檔中進行“短距離的旅行”。請看下面這個HTML片段:
- <table>
- <tr>
- <td>John</td>
- <td>Doe</td>
- <td>Alaska</td>
- </tr>
- </table>
在上面的HTML代碼中,第一個<td>是<tr>元素的首個子元素(firstChild),而最後一個<td>是<tr>元素的最後一個子元素(lastChild)。此外,<tr>是每個<td>元素的父節點(parentNode)。對firstChild最普遍的用法是訪問某個元素的文本:
- var x=[a paragraph];
- var text=x.firstChild.nodeValue;
parentNode屬性常被用來改變文檔的結構。假設您希望從文檔中刪除帶有id爲"maindiv"的節點:
- var x=document.getElementById("maindiv");
- x.parentNode.removeChild(x);
首先,您需要找到帶有指定id的節點,然後移至其父節點並執行removeChild()方法。
根節點
有兩種特殊的文檔屬性可用來訪問根節點:
- document.documentElement
- document.body
第一個屬性可返回存在於XML以及HTML文檔中的文檔根節點。第二個屬性是對HTML頁面的特殊擴展,提供了對<body>標籤的直接訪問。
HTML DOM 節點信息
nodeName、nodeValue以及nodeType包含有關於節點的信息。
節點信息
每個節點都擁有包含着關於節點某些信息的屬性。這些屬性是:
◆nodeName(節點名稱)
◆nodeValue(節點值)
◆nodeType(節點類型)
nodeName
nodeName屬性含有某個節點的名稱。
◆元素節點的nodeName是標籤名稱
◆屬性節點的nodeName是屬性名稱
◆文本節點的nodeName永遠是#text
◆文檔節點的nodeName永遠是#document
註釋:nodeName所包含的XML元素的標籤名稱永遠是大寫的
nodeValue
◆對於文本節點,nodeValue屬性包含文本。
◆對於屬性節點,nodeValue屬性包含屬性值。
◆nodeValue屬性對於文檔節點和元素節點是不可用的。
nodeType
nodeType屬性可返回節點的類型。最重要的節點類型是:
一個 HTML DOM 實例
下面這個例子向我們展示了當一個用戶在文檔中點擊時,HTML文檔的背景顏色如何被改變。
- <html>
- <head>
- <script type="text/javascript">
- function ChangeColor()
- {
- document.body.bgColor="yellow"
- }
- </script>
- </head>
- <body onclick="ChangeColor()">
- Click on this document!
- </body>
- </html>