基本概念
文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結構化的表述，並定義了一種方式可以使程序對該結構進行訪問，從而改變文檔的結構，樣式和內容。DOM 將文檔解析爲一個由節點和對象（包含屬性和方法的對象）組成的結構集合。簡言之，它會將web頁面和腳本語言連接起來
一個web頁面是一個文檔。這個文檔可以在瀏覽器窗口或作爲HTML源碼顯示出來。但文檔對象模型（DOM）提供了對同一份文檔的另一種表現：存儲和操作的方式。 DOM是web頁面的完全的面向對象表述，它能夠使用如 JavaScript等腳本語言進行修改。
DOM並不是天生就被規範好了的，早在W3C將DOM納入規範之前就已經產生DOM了，這些內容我們一般稱之爲DOM0。現在DOM的標準一直在被W3C管理着。
DOM 並不是一個編程語言，它只是一紙規範。規範可以由不同的語言來實現。由於javascript語言本身的特點。它更適合來實現DOM。但絕不是隻能由javascript來實現DOM。即DOM的設計與編程語言是互相獨立的。
正如W3C所定義的，DOM是獨立於平臺和語言的接口，該接口爲程序和腳本提供了對文檔的內容、結構和樣式的動態獲取和更新的功能。
DOM的出現來自對動態頁面的需求，先有DOM的實現（Netscape DOM0），再有各個廠商對DOM實現規範的需求，再有了W3C Activity Statement對於DOM發展的規範，然後纔有了我們所說的“DOM”。
DOM0：不是W3C規範。
DOM1：開始是W3C規範。專注於HTML文檔和XML文檔。
DOM2：對DOM1增加了樣式表對象模型(DOM2)
DOM3：對DOM2增加了內容模型 (DTD 、Schemas) 和文檔驗證。
DOM0指的是Necscape3.0和IE3.0提供對於HTML文檔功能，實現了包括元素(HTML Element)、表單(Form)、圖像(Image)等的接口和方法。DOM0雖然年代久遠，某些實現並不符合新的DOM理念，但爲了向後兼容，很多現代瀏覽器仍然支持DOM0的某些方法和屬性。即便某些方法的實現原理有所不同，但提供了可用性。DOM0出現後，各廠商意識到DOM的前景，紛紛向W3C建議DOM的規範化。於是出現了W3C DOM Activity Statement（DOM的活動清單）以及DOM1、DOM2、DOM3規範(Specification)
DOM實際上是由HTML元素和其他的多種類型組成的。所有組成DOM的東西被稱爲DOM節點。這些節點可以是元素、屬性、文本內容、註釋、文檔相關的內容等。。
你想要訪問的每個HTML元素都有一個與之相關聯的特定類型，並且所有這些類型都從Node類型擴展出來的。
EventTarget：是root抽象類（Abstract Class）。該類的對象永遠不會創建。它作爲一個基礎，因此所有的DOM節點都支持所謂的事件（Events）
Node：也是一個抽象類，作爲DOM節點的基礎。它提供了核心功能：parentNode、nextSibling、childNodes等）。節點類的對象沒有被創建。但是，有一些具體的節點類繼承了它，比如：文本節點的Text，元素節點的Element以及註釋節點的Comment等
Element：是DOM元素的基本類。它提供了元素級的搜索，比如nextElementSibling、childern、getElementsByTagName、querySelector等。在瀏覽器中，不僅有HTML，還有XML和SVG文檔。元素類是更具體類的一些基礎，比如SVGElement、XMLElement和HTMLElement
HTMLElement：是HTML元素的基本類，它由各種HTML元素繼承。比如HTMLInputElemnt（對應input元素的類）、HTMLBodyElement（對應body元素的類）和HTMLAnchorElement（對應a元素的類）等
根據id獲取元素節點
語法：element = document.getElementById(id);
參數：id是大小寫敏感的字符串，代表了所要查找的元素的唯一ID.
返回值：element是一個 Element 對象。如果當前文檔中擁有特定ID的元素不存在則返回null
根據類名
語法：
var elements = document.getElementsByClassName(names);
var elements = rootElement.getElementsByClassName(names)
參數：names 是一個字符串，表示要匹配的類名列表；類名通過空格分隔
返回值：elements 是一個實時集合，包含了找到的所有元素
注意：
獲取所有 class 爲 ‘test’ 的元素:document.getElementsByClassName(‘test’);
獲取所有 class 同時包括 ‘red’ 和 ‘test’ 的元素:document.getElementsByClassName(‘red test’);
根據標籤名
語法：
var elements = document.getElementsByTagName(name);
var elements = element.getElementsByTagName(name)
參數：name 是一個代表元素的名稱的字符串。特殊字符 “*” 代表了所有元素
返回值：
elements 是一個由發現的元素出現在樹中的順序構成的HTML集合
子節點
childNodes（Node）
Node.childNodes 返回包含指定節點的子節點的集合（包含文本節點）
語法：var list= node.childNodes;
返回值：包含文本節點的子節點列表（只讀）
firstChild
Node.firstChild 只讀屬性返回樹中節點的第一個子節點，如果節點是無子節點，則返回 null。
lastChild
Node.lastChild 是一個只讀屬性，返回當前節點的最後一個子節點。如果沒有子節點，則返回 null
children（Element 實現於 ParentNode）
ParentNode.children 返回包含指定節點的子節點的集合（剔除文本節點）
語法：
var children = node.children;
var elList = element.children;
返回值: 剔除文本節點的子節點列表（只讀）
childElementCount
ParentNode.childElementCount 只讀屬性返回一個無符號長整型數字，表示給定元素的子元素數。
firstElementChild
ParentNode.firstElementChild 只讀屬性，返回對象的第一個孩子 Element, 如果沒有子元素，則爲null。
lastElementChild
ParentNode.lastElementChild 只讀屬性返回對象的最後一個孩子Element ，如果沒有子元素，則返回null
獲取兄弟節點
nextSibling（Node）
Node.nextSibling 是一個只讀屬性，返回其父節點的 childNodes 列表中緊跟在其後面的節點，如果指定的節點爲最後一個節點，則返回 null
previousSibling（Node）
Node. previousSibling是一個只讀屬性，返回當前節點的前一個兄弟節點,沒有則返回null.
nextElementSibling（Element 實現於NonDocumentTypeChildNode）
nextElementSibling 返回當前元素在其父元素的子元素節點中的後一個元素節點,如果該元素已經是最後一個元素節點,則返回null,該屬性是隻讀的.
previousElementSibling（Element 實現於NonDocumentTypeChildNode）
previousElementSibling 返回當前元素在其父元素的子元素節點中的前一個元素節點,如果該元素已經是第一個元素節點,則返回null,該屬性是隻讀的.
獲取父節點
Node.parentNode
返回指定的節點在DOM樹中的父節點
parentNode是指定節點的父節點.一個元素節點的父節點可能是一個元素(Element )節點,也可能是一個文檔(Document )節點,或者是個文檔碎片(DocumentFragment)節點.
對於下面的節點類型: Attr, Document, DocumentFragment, Entity, Notation,其parentNode屬性返回null.
Node.parentElement
返回當前節點的父元素節點,如果該元素沒有父節點,或者父節點不是一個元素節點.則 返回null.
query
querySelector
語法：element = document.querySelector(selectors);
參數：selectors包含一個或多個要匹配的選擇器字符串，該字符串必須是有效的CSS選擇器字符串
返回值：表示文檔中與指定的一組CSS選擇器匹配的第一個元素的Element對象。
querySelectorAll
語法：elementList = document.querySelectorAll(selectors);
參數：selectors 是一個或多個CSS選擇器，這些選擇器由逗號隔開
返回值：表示文檔中與指定的一組CSS選擇器匹配元素列表
屬性節點
對於屬性節點的獲取，我們一般都是指對屬性節點值的獲取
Element.attributes
Element.attributes 屬性返回該元素所有屬性節點的一個實時集合。是字符串形式的名/值對，每一對名/值對對應一個屬性節點。
Element.getAttribute(attributeName)
Element.getAttribute() 返回元素上一個指定的屬性值。如果指定的屬性不存在，則返回 null 或 “” （空字符串）
語法：var attribute = element.getAttribute(attributeName);
參數：attributeName 是你想要獲取的屬性值的屬性名稱
返回值：attribute 是一個包含 attributeName 屬性值的字符串
Element.getAttributeNames()
Element.getAttributeNames() 返回一個Array，該數組包含指定元素（Element）的所有屬性名稱，如果該元素不包含任何屬性，則返回一個空數組。
Element.getAttributeNode(attrName)
返回指定元素的指定屬性， 返回值是 Attr 節點類型
語法：var attrNode = element.getAttributeNode(attrName);
參數：attrName 是一個包含屬性名稱的 字符串
返回值：attrNode 獲得的屬性返回值，是Attr 節點，nodeType 爲 2
Element.hasAttribute(attName)
hasAttribute 返回一個布爾值，指示該元素是否包含有指定的屬性（attribute）
語法：var result = element.hasAttribute(attName);
參數：attName 是一個字符串，表示屬性的名稱。返回值:result 爲返回的布爾值：true 或false。
文本節點的獲取
對於文本節點的獲取，我們一般都是指對文本節點值的獲取
Node.innerText
Node.innerText是一個表示一個節點及其後代的“渲染”文本內容的屬性
Node.textContent
Node.textContent表示一個節點及其後代的文本內容
與innerText的區別
innerText 受 CSS 樣式的影響，並且不會返回隱藏元素的文本，而textContent會。innerText會觸發重排（reflow），但textContent 不會。
textContent的性能要優於innerText
Element.innerHTML設置或獲取HTML語法表示的元素的後代
新增元素節點
Document.createElement(tagName)
Document.createElement(tagName) 方法創建由tagName 指定的HTML元素節點
Node.appendChild()
Node.appendChild(child) 方法將一個節點添加到指定父節點的子節點列表末尾。
語法：var child = node.appendChild(child);
參數：child 即是參數又是這個方法的返回值.
返回值：child 即是參數又是這個方法的返回值.
元素節點插入
Node.insertBefore()
Node.insertBefore() 方法在參考節點之前插入一個節點作爲一個指定父節點的子節點
語法：
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
參數：
parentElement是新插入節點的父節點
newElement 是被插入的節點
referenceElement 參考節點
返回值：
insertedElement：是被插入的節點，即 newElement
Element.insertAdjacentElement()
insrtAdjacentElement() 方法將一個給定的元素節點插入到相對於被調用的元素的給定的一個位置。
語法：element.insertAdjacentElement(position, element);
參數：
position：字符串文本 表示相對於該元素的位置；必須是以下字符串之一：
‘beforebegin’: 在該元素本身的前面
‘afterbegin’:只在該元素當中, 在該元素第一個子孩子前面.
‘beforeend’:只在該元素當中, 在該元素最後一個子孩子後面.
‘afterend’: 在該元素本身的後面.
節點的替換
Node.replaceChild(newChild, oldChild);
用指定的節點替換當前節點的一個子節點，並返回被替換掉的節點
語法：
var replacedNode = parentNode.replaceChild(newChild, oldChild);
參數：newChild :
用來替換 oldChild 的新節點。如果該節點已經存在於DOM樹中，則它會被從原始位置刪除。
oldChild : 被替換掉的原始節點
返回值：replacedNode 和oldChild相等，即返回被替換掉的節點
節點的刪除
Node.removeChild()
Node.removeChild() 方法從DOM中刪除一個子節點。返回刪除的節點
語法：oldChild = node.removeChild(child);
參數：
node 是child的父節點.
child 是要移除的那個子節點.
返回值：oldChild保存對刪除的子節點的引用.
ChildNode.remove()
ChildNode.remove() 方法把從它所屬的DOM樹中刪除對象
屬性的增刪改
document.createAttribute(name)//創建一個新的屬性節點
Element.setAttribute(name, value);
Element.setAttribute設置指定元素上的一個屬性值。如果屬性已經存在，則更新該值; 否則將添加一個新的屬性用指定的名稱和值。
語法：element.setAttribute(name, value);
參數：name 是表示屬性名稱的字符串
value 是屬性的新值
Element.setAttributeNode()
setAttributeNode() 爲指定的 Element 添加屬性節點
語法：var replacedAttr = element.setAttributeNode(attribute);
參數：attribute是添加到 element 中的屬性節點.
返回值：被替換掉的屬性節點
Element.removeAttribute()
removeAttribute() 從指定的元素中刪除一個屬性
語法：element.removeAttribute(attrName)
參數：attrName 是一個字符串，將要從元素中刪除的屬性名。
Element.removeAttributeNode(attributeNode)
removeAttributeNode 從當前的 element(元素節點) 刪除指定的屬性
語法：removedAttr = element.removeAttributeNode(attributeNode)
參數：attributeNode 是需要被刪除的 Attr 節點。
返回值：removedAttr 是被刪除了的 Attr 節點。