本篇主要介紹DOM內容、DOM 節點、節點屬性以及獲取HTML元素的方法。
目錄
1. 介紹 DOM：介紹DOM，以及對DOM分類和功能的說明。
2. DOM 節點：介紹DOM節點分類和節點層次。
3. HTML DOM 節點屬性：介紹HTML DOM節點屬性，如：innerHTML、innerText、nodeName、nodeValue以及nodeType等。
4. 獲取 HTML 元素節點方法：介紹文檔節點(document)、元素節點可以通過getElementById、getElementsByName、getElementsByClassName以及getElementsByTagName方法獲取元素節點。
1. 介紹
1.1 DOM 解釋
說明：DOM全稱 Document Object Model，即文檔對象模型。將文檔抽象成一個樹型結構，文檔中的標簽、標簽屬性或標簽內容可以表示為樹上的結點。
1.2 DOM 分類
按照操作對象的不同，可分為Core DOM、XML DOM 和 HTML DOM。
Core Dom：核心Dom，針對任何結構化文檔的標准模型。
XML DOM：用於XML文檔的標准模型，對XML元素進行操作。
HTML DOM： 用於HTML文檔的標准模型，對HTML元素進行操作。
1.3 DOM 功能
① 查詢某個元素
② 查詢某個元素的祖先、兄弟以及后代元素
③ 獲取、修改元素的屬性
④ 獲取、修改元素的內容
⑤ 創建、插入和刪除元素
2. DOM 節點
文檔中的所有內容都可表示為一個節點(node)，如：HTML里整個文檔、每個標簽、每個標簽的屬性和文本都可作為一個節點。
2.1 節點分類
① 文檔節點(Document)：整個XML、HTML文檔
② 元素節點(Element)：每個XML、HTML元素
③ 屬性節點(Attr)：每個XML、HTML元素的屬性
④ 文本節點(Text)：每個XML、HTML元素內的文本
⑤ 注釋節點(Comment)：每個注釋
注意：這里的Document節點為總稱，具體可分為XMLDocument和HTMLDocument，同理Element也可分為XMLElement和HTMLElement。
2.2 HTML DOM 節點層次
節點彼此都有等級關系：父節點、兄弟節點、子節點等等。
2.2.1 示例：
HTML文檔轉換為HTML DOM節點樹
2.2.2 示例圖介紹：
1) <head>元素和<body>元素的父節點為<html>元素。
2) <head>元素和<body>元素為兄弟節點。
3) <title>元素為<head>元素的子節點。
3. HTML DOM 節點屬性
介紹HTML DOM節點屬性，如：innerHTML、innerText、nodeName、nodeValue以及nodeType等。
3.1 innerHTML：以HTML代碼格式獲取或設置節點的內容
說明：以HTML格式賦值給innerHTML屬性時，會以HTML的形式呈現。比如：node.innerHTML="<input type='button' value='按鈕' />" 將會顯示一個按鈕。
示例：
document.getElementById('div').innerHTML="<input type='button' value='按鈕' />"; // 設置div元素的innerHTML為一個按鈕
document.getElementById('div').innerHTML; // => <input type='button' value='按鈕' /> ：以HTML格式返回節點的內容
3.2 innerText：獲取或設置節點的文本內容
說明：以文本字符串的形式獲取或設置節點的內容。
示例1：
賦值HTML格式內容<input type='button' value='按鈕' /> 將會以字符串顯示"<input type='button' value='按鈕' />"。
示例2：
獲取內容時，只會獲取文本內容。
document.getElementById('div').innerText; // => "文本1 文本2"
3.3 nodeName：獲取節點名稱，只讀屬性
說明：
| 節點類型 | nodeName |
| 文檔節點(Document) | 返回 #document |
| 元素節點(Element) | 返回 大寫元素名稱 |
| 屬性節點(Attr) | 返回 屬性名稱 |
| 文本節點(Text) | 返回 #text |
示例：
console.log( document.nodeName ); // => #document：文檔節點
console.log( document.body.nodeName ); // => BODY：元素節點
console.log( document.getElementById('div').nodeName ); // => DIV：元素節點
console.log( document.getElementById('div').attributes.style.nodeName ); // => style：屬性節點
3.4 nodeValue：獲取或設置節點的值
說明：文檔節點、元素節點此屬性返回null，並且為只讀。
| 節點類型 | nodeValue |
| 文檔節點(Document) | 只讀，返回null |
| 元素節點(Element) | 只讀，返回null |
| 屬性節點(Attr) | 獲取或設置屬性的值 |
| 文本節點(Text) | 獲取或設置文本的值 |
示例：
console.log( document.nodeValue ); // => null：文檔節點
console.log( document.body.nodeValue ); // => null：元素節點
console.log( document.getElementById('div').nodeValue ); // => null：元素節點
console.log( document.getElementById('div').attributes.style.nodeValue ); // => width:200px;height:100px;border:1px solid black;：style屬性的值
document.getElementById('div').attributes.style.nodeValue = ' width:200px;height:200px'; // 設置style屬性的值
3.5 nodeType：返回節點類型，只讀屬性
說明：
| 節點類型 | nodeType |
| 文檔節點(Document) | 9 |
| 元素節點(Element) | 1 |
| 屬性節點(Attr) | 2 |
| 文本節點(Text) | 3 |
示例：
console.log( document.nodeType ); // => 9：文檔節點
console.log( document.body.nodeType ); // => 1：元素節點
console.log( document.getElementById('div').nodeType ); // => 1：元素節點
console.log( document.getElementById('div').attributes.style.nodeType ); // => 2：屬性節點
4. 獲取 HTML 元素節點方法
文檔節點(document)、元素節點可以通過getElementById、getElementsByName、getElementsByClassName以及getElementsByTagName方法獲取元素節點。
4.1 getElementById(id) ：獲取指定ID的元素
參數：
①id {string} ：元素ID。
返回值：
{HtmlElement} 元素節點對象。若沒有找到，返回null。
注意：
① HTML元素ID是區分大小寫的。
② 若沒有找到指定ID的元素，返回null。
③ 若一個父節點下面有多個相同ID元素時，默認選取第一個(而不是層級最高的)。
示例：
document.getElementById('div'); // => 獲取ID為div的元素
4.2 getElementsByName(name) ：返回一個包含指定name名稱的的元素數組
參數：
① name {string} ：name名稱。
返回值：
{Array} 符合條件的元素數組。若沒有找到符合條件的，返回空數組。
示例：
document.getElementsByName('Btn'); // 返回一個name為btn的元素數組
4.3 getElementsByClassName(className) ：返回一個包含指定class名稱的的元素數組
參數：
① className {string} ：class名稱。
返回值：
{Array} 符合條件的元素數組。若沒有找到符合條件的，返回空數組。
示例：
document.getElementsByClassName('show'); // 返回一個class包含show的元素數組
4.4 getElementsByTagName(elementName) ：返回一個指定標簽名稱的的元素數組
參數：
① elementName {string} ：標簽名稱。如：div、a等等
返回值：
{Array} 符合條件的元素數組。若沒有找到符合條件的，返回空數組。
示例：
document.getElementsByTagName('div'); // 返回一個標簽為div的元素數組