㈠什么是DOM？
文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標志語言的標准編程接口。
DOM 定義了訪問 HTML 和 XML 文檔的標准：
"W3C 文檔對象模型 （DOM） 是中立於平台和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。"
㈡分類
W3C DOM 標准被分為 3 個不同的部分：
⑴核心 DOM - 針對任何結構化文檔的標准模型
⑵XML DOM - 針對 XML 文檔的標准模型
⑶HTML DOM - 針對 HTML 文檔的標准模型
㈢什么是 HTML DOM？
HTML DOM 是：
⑴HTML 的標准對象模型
⑵HTML 的標准編程接口
⑶W3C 標准
HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。
換言之，HTML DOM 是關於如何獲取、修改、添加或刪除 HTML 元素的標准。
㈣HTML DOM 節點
在 HTML DOM 中，所有事物都是節點。DOM 是被視為節點樹的 HTML。
1.根據 W3C 的 HTML DOM 標准，HTML 文檔中的所有內容都是節點：
⑴整個文檔是一個文檔節點
⑵每個 HTML 元素是元素節點
⑶HTML 元素內的文本是文本節點
⑷每個 HTML 屬性是屬性節點
⑸注釋是注釋節點
2.HTML DOM 節點樹
3.節點父、子和同胞
節點樹中的節點彼此擁有層級關系。
♠我們常用父（parent）、子（child）和同胞（sibling）等術語來描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。
⑴在節點樹中，頂端節點被稱為根（root）。
⑵每個節點都有父節點、除了根（它沒有父節點）。
⑶一個節點可擁有任意數量的子節點。
⑷同胞是擁有相同父節點的節點。
♠具體事例：
<html> <head> <meta charset="utf-8"> <title>DOM 教程</title> </head> <body> <h1>DOM 課程1</h1> <p>Hello world!</p> </body> </html>
從上面的 HTML 中：
- <html> 節點沒有父節點；它是根節點
- <head> 和 <body> 的父節點是 <html> 節點
- 文本節點 "Hello world!" 的父節點是 <p> 節點
並且：
- <html> 節點擁有兩個子節點：<head> 和 <body>
- <head> 節點擁有兩個子節點：<meta> 與 <title> 節點
- <title> 節點也擁有一個子節點：文本節點 "DOM 教程"
- <h1> 和 <p> 節點是同胞節點，同時也是 <body> 的子節點
並且：
- <head> 元素是 <html> 元素的首個子節點
- <body> 元素是 <html> 元素的最后一個子節點
- <h1> 元素是 <body> 元素的首個子節點
- <p> 元素是 <body> 元素的最后一個子節點
㈤HTML DOM 方法
☞HTML DOM 方法是我們可以在節點（HTML 元素）上執行的動作。
☞HTML DOM 屬性是我們可以在節點（HTML 元素）設置和修改的值。
★HTML DOM 對象 - 方法和屬性
一些常用的 HTML DOM 方法：
- getElementById(id) - 獲取帶有指定 id 的節點（元素）
- appendChild(node) - 插入新的子節點（元素）
- removeChild(node) - 刪除子節點（元素）
一些常用的 HTML DOM 屬性：
- innerHTML - 節點（元素）的文本值
- parentNode - 節點（元素）的父節點
- childNodes - 節點（元素）的子節點
- attributes - 節點（元素）的屬性節點
★DOM對象方法：
㈥HTML DOM 屬性
屬性是節點（HTML 元素）的值，能夠獲取或設置。
⑴innerHTML 屬性
獲取元素內容的最簡單方法是使用 innerHTML 屬性。
innerHTML 屬性對於獲取或替換 HTML 元素的內容很有用。包括<html>和<body>。
★示例：下面的代碼獲取 id="zq" 的 <p> 元素的 innerHTML：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p id="zq">早上起來，擁抱太陽。</p> <script> var mychar=document.getElementById("zq").innerHTML; document.write(mychar); </script> </body> </html>
效果圖：
☞在上面的例子中，getElementById 是一個方法，而 innerHTML 是屬性。
⑵nodeValue 屬性
★nodeValue 屬性規定節點的值。
▪元素節點的 nodeValue 是 undefined 或 null
▪文本節點的 nodeValue 是文本本身
▪屬性節點的 nodeValue 是屬性值
★nodeName 屬性規定節點的名稱。
- nodeName 是只讀的
- 元素節點的 nodeName 與標簽名相同
- 屬性節點的 nodeName 與屬性名相同
- 文本節點的 nodeName 始終是 #text
- 文檔節點的 nodeName 始終是 #document
注意： nodeName 始終包含 HTML 元素的大寫字母標簽名。
★ 示例：獲取元素的值
下面的例子會取回 <p id="intro"> 標簽的文本節點值：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p id="intro">早睡早起，身體好。</p> <script> z=document.getElementById("intro"); document.write(z.firstChild.nodeValue); </script> </body> </html>
效果圖：
㈦HTML DOM 訪問
訪問 HTML 元素（節點）
訪問 HTML 元素等同於訪問節點
★能夠以不同的方式來訪問 HTML 元素：
⑴通過使用 getElementById() 方法
⑵通過使用 getElementsByTagName() 方法
⑶通過使用 getElementsByClassName() 方法
1.getElementById() 方法
getElementById() 方法返回帶有指定 ID 的元素引用：
☼語法 ：node.getElementById("id");
☼示例：下面的例子獲取 id="intro" 的元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p id="intro">我愛洗澡，皮膚好好。</p> <p>這個實例演示了 <b>getElementById</b> 方法!</p> <script> x=document.getElementById("intro"); document.write("<p>段落的文本為: " + x.innerHTML + "</p>"); </script> </body> </html>
效果圖：
2.getElementsByTagName() 方法
getElementsByTagName() 返回帶有指定標簽名的所有元素。
☼語法：node.getElementsByTagName("tagname");
☼示例1：下面的例子返回包含文檔中所有 <p> 元素的列表：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>洗刷刷，洗刷刷，喔噢~</p> <p>DOM 是非常有用的!</p> <p>這個實例演示了 <b>getElementsByTagName</b> 方法的使用。</p> <script> x=document.getElementsByTagName("p"); document.write("第一個段落的文本為: " + x[0].innerHTML); </script> </body> </html>
效果圖：
☼示例2：下面的例子返回包含文檔中所有 <p> 元素的列表，並且這些 <p> 元素應該是 id="main" 的元素的后代（子、孫等等）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>Hello World!</p> <div id="main"> <p>時間過得總是讓人猝不及防。</p> <p>這個實例演示了 <b>getElementsByTagName</b> 方法的使用。</p> </div> <script> x=document.getElementById("main").getElementsByTagName("p"); document.write("div 中的第一個段落為: " + x[0].innerHTML); </script> </body> </html>
效果圖：
3.The getElementsByClassName() Method
如果希望查找帶有相同類名的所有 HTML 元素，請使用這個方法：
document.getElementsByClassName("intro");
上面的例子返回包含 class="intro" 的所有元素的一個列表