HTML DOM 之 DOM物件：Document Object Model (文件物件模型)
思維導圖
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 文件的物件。
DHTML：是很多技術的簡稱
** html: 封裝資料
** css：使用屬性和屬性值設定樣式
** dom：操作html文件（標記型文件）
** javascript：專門指的是js的語法語句（ECMAScript）
HTML DOM 節點
HTML文件中的每個成分都是一個節點。
節點(Node)
根據DOM，HTML文件中的每個成分都是一個節點。
DOM 是這樣規定的：
1、整個文件是一個文件節點 (Document)
2、每個 HTML 標籤是一個元素節點 (Element)
3、包含在 HTML 元素中的文字是文字節點
4、每一個 HTML 屬性是一個屬性節點
5、註釋屬於註釋節點
Node 層次
節點彼此都有等級關係。
HTML 文件中的所有節點組成了一個文件樹（或節點樹）。HTML 文件中的每個元素、屬性、文字等都代表著樹中的一個節點。
樹起始於文件節點，並由此繼續伸出枝條，直到處於這棵樹最低級別的所有文字節點為止。
下面這個圖片表示一個文件樹（節點樹）：
HTML DOM 訪問節點
通過 DOM，您可訪問 HTML 文件中的每個節點。
查詢並訪問節點
你可通過若干種方法來查詢您希望操作的元素：
通過使用 getElementById() 和 getElementsByTagName() 方法
通過使用一個元素節點的 parentNode、firstChild 以及 lastChild 屬性
* getElementById() 和 getElementsByTagName() 這兩種方法，可查詢整個 HTML 文件中的任何 HTML 元素。
這兩種方法會忽略文件的結構。假如您希望查詢文件中所有的 <p> 元素，
getElementsByTagName() 會把它們全部找到，不管 <p> 元素處於文件中的哪個層次。
同時，getElementById() 方法也會返回正確的元素，不論它被隱藏在文件結構中的什麼位置。
節點列表（nodeList）
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 包含有關於節點的資訊。
節點資訊
每個節點都擁有包含著關於節點某些資訊的屬性。這些屬性是：
nodeType（節點型別）
nodeName（節點名稱）
nodeValue（節點值）
========================
nodeType 屬性可返回節點的型別。
元素型別 節點型別
元素 1
屬性 2
文字 3
nodeName 屬性含有某個節點的名稱。
元素節點的 nodeName 是標籤名稱，如 input, div, img ...
屬性節點的 nodeName 是屬性名稱, 如 id, name, src ...
文字節點的 nodeName 永遠是 #text
文件節點的 nodeName 永遠是 #document
註釋：nodeName 所包含的 XML 元素的標籤名稱永遠是大寫的
nodeValue
nodeValue 屬性對於 元素節點 和 文件節點 是不可用的。
對於屬性節點，nodeValue 屬性包含屬性值。
對於文字節點，nodeValue 屬性包含文字。
實際應用
1、Document物件
Document建立標籤.
createElement(); -----建立一個元素標籤
createTextNode(); -----建立一個文字節點
node物件.appendChild(node);
案例:
<BODY>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ul>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
// 需求:建立一個<li>深圳</li> 將其放在ul中
// 1.建立li標籤 <li></li>
var liElement = document.createElement("li");
// 2.建立一個文字節點 深圳
var textElement = document.createTextNode("深圳");
// 3.將文字內容新增到li中 <li>深圳</li>
liElement.appendChild(textElement);
// 4.將li新增到ul中.(查詢ul.)
var city = document.getElementById("city");
city.appendChild(liElement);
</SCRIPT>
write()方法：
向頁面輸出變數（值）
向頁面輸出html程式碼
2、Element物件(瞭解)
** 如何獲取標籤的子標籤（唯一有效辦法）（*********）
- 使用getElementsByTagName方法
元素物件:元素(標籤)
元素物件操作屬性
getAttribute(“屬性的名”); // 獲得屬性的值
setAttribute(“屬性名”,”屬性值”); // 新增和修改,(value值設定不了)
removeAttribute(“屬性名”); // 移除屬性
案例：操作元素的屬性
// 操作屬性 (對屬性進行增加 修改 刪除)
3、Node物件(瞭解)
節點物件的屬性：父節點 子節點及同輩節點
parentNode
節點的插入
appendChild(); 剪下貼上的效果
insertBefore(newNode,oldNode);
刪除和替換節點.
removeChild() //必須是 父節點.removeChild(子節點)
replaceChild(newNode,oldNode)
複製節點
cloneNode(boolean); boolean: true 克隆的時候 帶著子節點一起克隆; false 只克隆當前節點，預設false