基本概念

文件物件模型 (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 節點。