文檔對(duì)象模型 (DOM) 將 web 頁(yè)連接到腳本或編程語(yǔ)言。通常這意味著 javascript, 但將 HTML、SVG 或 XML 文檔建模為對(duì)象不是 javascript 語(yǔ)言的一部分。它給文檔（結(jié)構(gòu)樹）提供了一個(gè)結(jié)構(gòu)化的表述并且定義了一種方式—程序可以對(duì)結(jié)構(gòu)樹進(jìn)行訪問(wèn)，以改變文檔的結(jié)構(gòu)，樣式和內(nèi)容。 DOM 提供了一種表述形式— 將文檔作為一個(gè)結(jié)構(gòu)化的節(jié)點(diǎn)組以及包含屬性和方法的對(duì)象。從本質(zhì)上說(shuō)，它將 web 頁(yè)面和腳本或編程語(yǔ)言連接起來(lái)了。
盡管通常會(huì)使用 JavaScript 來(lái)訪問(wèn) DOM， 但它并不是 JavaScript 的一部分，它也可以被其他語(yǔ)言使用。
DOM的基本類型
Node類型
Js中所有節(jié)點(diǎn)類型都繼承自Node類型，因此所有節(jié)點(diǎn)都共享著相同的基本屬性和方法。
每個(gè)節(jié)點(diǎn)都有一個(gè)nodeType屬性，用于表明節(jié)點(diǎn)類型。
Node.ELEMENT_NODE 1 一個(gè) 元素 節(jié)點(diǎn)，例如 <p> 和 <div>。
Node.TEXT_NODE 3 Element 或者 Attr 中實(shí)際的 文字
Node.PROCESSING_INSTRUCTION_NODE 7 一個(gè)用于XML文檔的 ProcessingInstruction ，例如 <?xml-stylesheet ... ?> 聲明。
Node.COMMENT_NODE 8 一個(gè) Comment 節(jié)點(diǎn)。
Node.DOCUMENT_NODE 9 一個(gè) Document 節(jié)點(diǎn)。
Node.DOCUMENT_TYPE_NODE 10 描述文檔類型的 DocumentType 節(jié)點(diǎn)。例如 <!DOCTYPE html> 就是用于 HTML5 的。
Node.DOCUMENT_FRAGMENT_NODE 11 一個(gè) DocumentFragment 節(jié)點(diǎn)
2.4.5.6.12已被棄用盡量不要使用。
Document類型
js通過(guò)Document表示類型文檔。在瀏覽器中document對(duì)象是HTMLDocument的一個(gè)實(shí)例，表示整個(gè)HTML頁(yè)面。document是window中一個(gè)屬性可以當(dāng)作全局變量訪問(wèn)。
Document有下面的特性：
nodeType為9
nodeName為#document
nodeValue為null
parentNode為null
子節(jié)點(diǎn)可能是一個(gè)DocumentType或Element
Element類型
Element類型用于表現(xiàn)HTML元素，提供對(duì)元素標(biāo)簽名、子節(jié)點(diǎn)及特性訪問(wèn)。
Element有下面幾條特性：
nodeType為1
nodeName為元素標(biāo)簽名，tagName也是返回標(biāo)簽名
nodeValue為null
parentNode可能是Document或Element
子節(jié)點(diǎn)可能是Element，Text，Comment，Processing_Instruction，CDATASection或EntityReference
Text類型
文本節(jié)點(diǎn)用Text表示，包含的是可以照字面解釋的純文本內(nèi)容。純文本可以包含轉(zhuǎn)義后的HTML字符，但不能包含HTML代碼。
Text有下面的特性：
nodeType為3
nodeName為#text
nodeValue為文本內(nèi)容
parentNode是一個(gè)Element
沒(méi)有子節(jié)點(diǎn)
Comment
注釋在DOM中通過(guò)Comment類型來(lái)表示的。
Comment節(jié)點(diǎn)具有以下特征：
nodeType為8
nodeName為#comment
nodeValue為注釋的內(nèi)容
parentNode可能是Document或Element
沒(méi)有子節(jié)點(diǎn)
DocumentType類型
DocumentType包含著與文檔doctype有關(guān)的信息。
nodeType值為10；
nodeName的值為doctype的名稱；
nodeValue的值為null；
parentNode的值為null；
parentNode是Document；
沒(méi)有子節(jié)點(diǎn)；
DocumentFragment
在所有節(jié)點(diǎn)類型中，只有DocumentFragment在文檔中沒(méi)有對(duì)應(yīng)的標(biāo)記。DOM規(guī)定文檔片段（DocumentFragment）是一種輕量級(jí)的文檔，可以包含和控制節(jié)點(diǎn)，但不會(huì)像完整文檔那樣占用額外資源。
可以將他當(dāng)作倉(cāng)庫(kù)，在里面保存將來(lái)可能會(huì)添加到文檔中的節(jié)點(diǎn)。
DocumentFragment有下面的特性：
nodeType為11
nodeName為#document-fragment
nodeValue為null
parentNode為null
Attr類型
元素的特性DOM中以attr來(lái)表示。在IE8以上都可以訪問(wèn)Attr類型的構(gòu)造函數(shù)和原型。從技術(shù)角度講，Attr就是存在于元素的attributes屬性中的節(jié)點(diǎn)。
開發(fā)人員最常使用的是getAttribute()/setAttribute()和removeAttribute()方法，很少直接引用特性節(jié)點(diǎn)。
Attr有下面的特性：
nodeType值為2
nodeName是特性的名稱
nodeValue是特性的值
parentNode為null
一些API
appendChild()
向父節(jié)點(diǎn)的末尾插入一個(gè)子節(jié)點(diǎn)，返回插入的節(jié)點(diǎn)（newChild）。
parent.appendChild(newChild);
insertBefore()
接受兩個(gè)參數(shù)第一個(gè)為要插入的節(jié)點(diǎn)，第二個(gè)為參照節(jié)點(diǎn)。插入節(jié)點(diǎn)后，被插入的節(jié)點(diǎn)會(huì)變成參照節(jié)點(diǎn)之前的一個(gè)同胞節(jié)點(diǎn)，返回插入的節(jié)點(diǎn)（newChild）。
parent.insertBefore(newNode,someNode)
replaceChild()
接受兩個(gè)參數(shù)，第一個(gè)為要插入的節(jié)點(diǎn)，第二個(gè)為要替換的節(jié)點(diǎn)。
parent.replaceChild(newNode,oldNode)
removeChild()
接受一個(gè)參數(shù)，要移除的節(jié)點(diǎn)，返回移除的節(jié)點(diǎn)。
parent.removeChild(someNode)
document.getElementById()
返回匹配指定id屬性的元素節(jié)點(diǎn)。如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
document.getElementsByTagName()
法返回所有指定HTML標(biāo)簽的元素，返回值是一個(gè)類似數(shù)組的HTMLCollection對(duì)象。
document.getElementsByName()
該方法用于選擇擁有name屬性的HTML元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等），返回一個(gè)類似數(shù)組的的對(duì)象（NodeList對(duì)象的實(shí)例），因?yàn)閚ame屬性相同的元素可能不止一個(gè)。
document.getElementsByClassName()
方法返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection實(shí)例對(duì)象），包括了所有class名字符合指定條件的元素。
document.querySelector()和document.querySelectorAll()
document.querySelector()接受一個(gè)CSS選擇器作為參數(shù)，返回匹配該選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
document.querySelectorAll()返回所有匹配節(jié)點(diǎn)。
但是，它們不支持CSS偽元素的選擇器（比如:first-line和:first-letter）和偽類的選擇器（比如:link和:visited），即無(wú)法選中偽元素和偽類。
createElement()
document.createElement方法用來(lái)生成網(wǎng)頁(yè)元素節(jié)點(diǎn)。
大小寫不敏感，即參數(shù)為div或DIV返回的是同一種節(jié)點(diǎn)。
var newDiv = document.createElement('div');
createTextNode()
createTextNode方法用來(lái)生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。
var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);
cloneNode()
cloneNode是用來(lái)返回調(diào)用方法的節(jié)點(diǎn)的一個(gè)副本，它接收一個(gè)bool參數(shù)，參數(shù)為true，表示parent的子節(jié)點(diǎn)也被復(fù)制，如果傳入false，則表示只復(fù)制了parent節(jié)點(diǎn)。
（1）和createElement一樣，cloneNode創(chuàng)建的節(jié)點(diǎn)只是游離有html文檔外的節(jié)點(diǎn)，要調(diào)用appendChild方法才能添加到文檔樹中
（2）如果復(fù)制的元素有id，則其副本同樣會(huì)包含該id，由于id具有唯一性，所以在復(fù)制節(jié)點(diǎn)后必須要修改其id
（3）調(diào)用接收的bool參數(shù)最好傳入，如果不傳入該參數(shù)，不同瀏覽器對(duì)其默認(rèn)值的處理可能不同
如果是通過(guò)addEventListener或者比如onclick進(jìn)行綁定事件，則副本節(jié)點(diǎn)不會(huì)綁定該事件
如果是內(nèi)聯(lián)方式綁定比如
<div onclick="showParent()"></div>
這樣的話，副本節(jié)點(diǎn)同樣會(huì)觸發(fā)事件。
createDocumentFragment()
該方法生成一個(gè)DocumentFragment對(duì)象。
DocumentFragment對(duì)象是一個(gè)存在于內(nèi)存的DOM片段，但是不屬于當(dāng)前文檔，常常用來(lái)生成較復(fù)雜的DOM結(jié)構(gòu)，然后插入當(dāng)前文檔。這樣做的好處在于，因?yàn)镈ocumentFragment不屬于當(dāng)前文檔，對(duì)它的任何改動(dòng)，都不會(huì)引發(fā)網(wǎng)頁(yè)的重新渲染，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)。
createAttribute()
方法生成一個(gè)新的屬性對(duì)象節(jié)點(diǎn)，并返回它。
attribute = document.createAttribute(name);
createAttribute方法的參數(shù)name，是屬性的名稱。
var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);
// 等同于
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
setAttribute()
該方法接受兩個(gè)參數(shù)，要設(shè)置的特性名和值。
setAttribute(name,value)
如果特性名以存在則會(huì)替換特性名的值。
getAttribute
該方法返回指定的特性名相應(yīng)的特性值，如果不存在，則返回null或空字符串。用法如下：
var value = element.getAttribute("id");
