一、DOM簡介
DOM（Document Object Model）即文檔對象模型，針對 HTML 和 XML 文檔的 API（應用程序接口）。DOM 描繪了一個層次化的節點樹，允許開發人員添加、移除和修改頁面的某一部分。
DOM是爲了讓開發人員通過js的方式操作HTML頁面或者XML頁面。
1.節點
加載 HTML 頁面時，Web 瀏覽器生成一個樹型結構，用來表示頁面內部結構。DOM 將這種樹型結構理解爲由節點組成。
例如: <html>和<body>是父子節點
<head>和<body>是兄弟節點
2.節點種類
元素節點、文本節點、屬性節點（nodeName、nodeType 和 nodeValue）
3.層次節點屬性
元素節點、文本節點、屬性節點（nodeName、nodeType 和 nodeValue）
二、DOM節點查找：
document是Document類型的一個對象.代表的是整個HTML頁面.它其實也是window對象的一個屬性.
1.根據ID查找
getElementById()：接受一個參數：獲取元素的 ID。如果找到相應的元素則返回該元素的 HTMLDivElement 對象，如果不存在，則返回 null。
2.根據標籤名查找：
getElementsByTagName()：返回一個對象數組 HTMLCollection(NodeList)，這個數組保存着所有相同元素名的節點列表。
3.根據名稱(name)查找
getElementsByName() ：獲取相同名稱(name)的元素，返回一個對象數組
HTMLCollection(NodeList)。
三、節點操作
DOM 不單單可以查找節點，也可以創建節點、複製節點、插入節點、刪除節點和替換節點。
1.創建節點：
1. createElement()方法可以創建一個元素節點。
示例：
document.createElement(“p”);
2. createTextNode()方法:創建一個文本節點
示例：
var text = document.createTextNode('段落'); //創建一個文本節點
p.appendChild(text); //將文本節點添加到子節點末尾
2.添加節點：
1.appendChild()方法講一個新節點添加到某個節點的子節點列表的末尾上。
示例：
var box = document.getElementById('box'); //獲取某一個元素節點
var p = document.createElement('p'); //創建一個新元素節點<p>
box.appendChild(p); //把新元素節點<p>添加子節點末尾。
2.insertBefore(newNode,oldNode)
3.複製節點：
cloneNode(參數)可以把子節點複製出來。
說明：參數爲true表示複製內容，，false僅僅複製節點
4.刪除節點：
removeChild()可以刪除指定的節點。
例如：box.parentNode.removeChild(box); //刪除指定節點
四、節點屬性操作
1.HTML屬性與DOM節點屬性對應關係：
HTML屬性 DOM節點屬性
id id
src src
title title
class className
for htmlFor
2.屬性訪問：
(1)node.屬性名
說明：可完成複製和取值
(2)node[“屬性名”]
(3)node.setAttribute(“屬性名”, ”屬性值”);
node.getAttribute(“屬性名”);
五.節點樣式操作：
Js可以直接操作css屬性
例如：
var o = document.getElementById("box");
o.style.background = “red";
說明：
1.若多個單詞的css屬性要將”-”去掉，將第二個單詞首字母大寫。
2.在獲取樣式時,如果定義的是行內樣式,js可以正常獲取,而定義在外部樣式表或內嵌樣式表中的樣式,js無法直接獲取。
解決方案：
var sty = window.getComputedStyle(node);
注意：屬性獲取時不可以獲取複合屬性值。例如：sty.background獲取不到
此時應該單獨獲取，如：sty.backgroundColor