1、HTML DOM 定義了訪問和操作HTML文檔的標準方法。 2、HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。 3、通過 JavaScript，您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。要改變頁面的某個東西，JavaScript
HTML DOM基礎知識
一、什麼是DOM？
1、HTML DOM 定義了訪問和操作HTML文檔的標準方法。
2、HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
3、通過 JavaScript，您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。要改變頁面的某個東西，JavaScript 就需要獲得對 HTML 文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔。
4、DOM 被分為不同的部分（核心、XML及HTML）和級別（DOM Level 1/2/3）：
- *Core DOM：定義了一套標準的針對任何結構化文檔的對象
- *XML DOM：定義了一套標準的針對 XML 文檔的對象
- *HTML DOM：定義了一套標準的針對 HTML 文檔的對象。
二、HTML DOM節點及節點樹
1、節點
根據 DOM，HTML 文檔中的每個成分都是一個節點。
DOM 是這樣規定的：
- 整個文檔是一個文檔節點
- 每個 HTML 標簽是一個元素節點
- 包含在 HTML 元素中的文本是文本節點
- 每一個 HTML 屬性是一個屬性節點
- 註釋屬於註釋節點
2、Node 層次
節點彼此都有等級關係。
HTML 文檔中的所有節點組成了一個文檔樹（或節點樹）。HTML 文檔中的每個元素、屬性、文本等都代表著樹中的一個節點。樹起始於文檔節點，並由此繼續伸出枝條，直到處於這棵樹最低級別的所有文本節點為止。
下麵這個圖片表示一個文檔樹（節點樹）：
3、節點樹
1 <html> 2 <head> 3 <title>DOM Tutorial</title> 4 </head> 5 <body> 6 <h1>DOM Lesson one</h1> 7 <p>Hello world!</p> 8 </body> 9 </html>
上面所有的節點彼此間都存在關係。
*除文檔節點之外的每個節點都有父節點。舉例，<head> 和 <body> 的父節點是 <html> 節點，文本節點 "Hello world!" 的父節點是 <p> 節點。
*大部分元素節點都有子節點。比方說，<head> 節點有一個子節點：<title> 節點。<title> 節點也有一個子節點：文本節點 "DOM Tutorial"。
*當節點分享同一個父節點時，它們就是同輩（同級節點）。比方說，<h1> 和 <p>是同輩，因為它們的父節點均是 <body> 節點。
*節點也可以擁有後代，後代指某個節點的所有子節點，或者這些子節點的子節點，以此類推。比方說，所有的文本節點都是 <html>節點的後代，而第一個文本節點是 <head> 節點的後代。
*節點也可以擁有先輩。先輩是某個節點的父節點，或者父節點的父節點，以此類推。比方說，所有的文本節點都可把 <html> 節點作為先輩節點。
三、ＨＴＭＬ ＤＯＭ訪問節點的方法
１．查找並訪問節點
你可通過若幹種方法來查找您希望操作的元素：
- 通過使用 getElementById() 和 getElementsByTagName() 方法
- 通過使用一個元素節點的 parentNode、firstChild 以及 lastChild 屬性
２．getElementById() 和 getElementsByTagName()
（１）getElementById() 可通過指定的 ID 來返回元素，語法：
document.getElementById("ID");
（２）getElementsByTagName() 方法會使用指定的標簽名返回所有的元素（作為一個節點列表），這些元素是您在使用此方法時所處的元素的後代。getElementsByTagName() 可被用於任何的 HTML 元素：
語法：
document.getElementsByTagName("標簽名稱");
或者：
document.getElementById('ID').getElementsByTagName("標簽名稱");
＜訪問節點列表時，索引號從０開始＞
３．parentNode、firstChild以及lastChild
這三個屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結構，在文檔中進行“短距離的旅行”。對 firstChild 最普遍的用法是訪問某個元素的文本；parentNode 屬性常被用來改變文檔的結構；
４．根節點
有兩種特殊的文檔屬性可用來訪問根節點：
- document.documentElement
- document.body
第一個屬性可返回存在於 XML 以及 HTML 文檔中的文檔根節點。
第二個屬性是對 HTML 頁面的特殊擴展，提供了對 <body> 標簽的直接訪問。
四．節點信息
每個節點都擁有包含著關於節點某些信息的屬性。這些屬性是：
- nodeName（節點名稱）
- nodeValue（節點值）
- nodeType（節點類型）
１．nodeName
nodeName 屬性含有某個節點的名稱。
- 元素節點的 nodeName 是標簽名稱
- 屬性節點的 nodeName 是屬性名稱
- 文本節點的 nodeName 永遠是 #text
- 文檔節點的 nodeName 永遠是 #document
註釋：nodeName 所包含的 XML 元素的標簽名稱永遠是大寫的
２．nodeValue
對於文本節點，nodeValue 屬性包含文本。
對於屬性節點，nodeValue 屬性包含屬性值。
nodeValue 屬性對於文檔節點和元素節點是不可用的。
３．nodeType
nodeType 屬性可返回節點的類型。
