Javascript中DOM常見API
前言：儘管現在有很多優秀的框架，大大簡化了我們的DOM操作，但是我們仍然要學好DOM知識來寫原生JS，從根本上去理解，才更能在解決問題時舉重若輕。
一、什麼是DOM
D（document）O（object）M（model） 文件物件模型。
DOM（文件物件模型）是HTML和XML文件的程式設計介面。它提供了對文件的結構化的表述，並定義一種方式可以使從程式中對該結構進行訪問，從而改變文件的結構、樣式和內容。DOM將文件解析為一個由節點和物件（包含屬性和方法的物件）組成的結構集合。
上述說法是MDN的解釋，太官方，我們來換種說法來解釋。
DOM就是一種想象的樹形結構，它的作用是將網頁轉為一個 JavaScript 物件，從而可以用指令碼進行各種操作（比如增刪內容）。
如上圖，是我們文件的樹形結構，我們透過DOM模型將上述結構一一對映成節點（透過建構函式把頁面中的節點變成例項物件，dom就是這樣把文件變成物件的），這些節點就又構成了節點樹，也就是我們說的想象中的那棵DOM Tree。
二、Node
DOM 的最小組成單位叫做節點（node）。文件的樹形結構（DOM 樹），就是由各種不同型別的節點組成。
節點主要有7種類型：
Document
：整個文件樹的根節點
Document
：doctype標籤節點，如
<！DOCTYPE html>
Element
：網頁的各種
Html
標籤，比如
等
Attribute
：網頁元素的屬性
Text
：標籤之間或者標籤包含的文字
Comment
：註釋
DocunmentFragment
：文件的片段
所以文件樹對應的節點樹如同下圖：
注：DOM樹有3種層級結構：
父節點關係（parentNode）：直接的上級節點
子節點關係（childNodes）：直接的下級節點
兄弟關係（sibling）：擁有同一個父節點的同級節點
值得注意的是，在上圖中只有根節點也就是
對應的節點沒有父節點。
三、Node介面
瀏覽器提供一個原生的節點物件
Node
，上面的7種節點均繼承了
Node
，因此具有一些共同的屬性和方法。這是DOM操作的基礎。
1、屬性
1.1 Node.prototype.nodeType
nodeType
屬性返回一個整數值，表示節點的型別。
如上圖，我們獲取當前頁面的
body
標籤下的第一個孩子，是一個
div
標籤，然後我們透過
nodeType
來看一下它的節點型別，結果返回了一個數字1，這代表著是一個
Element
節點。
【至於為什麼會是返回一個數字而不是簡單明瞭的返回
Element
，這也是由於歷史原因，早期計算機記憶體緊張，為了節省記憶體使用了並無規律的數字】
常見的有以下：
Node。ELEMENT_NODE
：1
Node。ATTRIBUTE_NODE
：2
Node。TEXT_NODE
：3
Node。COMMENT_NODE
：8
Node。DOCUMENT_NODE
：9
Node。DOCUMENT_TYPE_NODE
：10
Node。DOCUMENT_FRAGMENT_NODE
：11
1.2 Node.prototype.nodeName
nodeName
屬性返回節點名稱
注：在元素節點中，返回名稱基本都是大寫，只有
標籤返回的是小寫。
1.3 Node.prototype.nodeValue
nodeValue
屬性返回一個字串，表示當前節點本身的文字值，該屬性可讀寫。
只有文字節點（text）、註釋節點（comment）和屬性節點（attr）有文字值，因此這三類節點的
nodeValue
可以返回結果，其他型別的節點一律返回
null
。
// html 程式碼如下
//
var
div
=
document
。
getElementById
（
‘d1’
）；
div
。
nodeValue
// null
div
。
firstChild
。
nodeValue
//“hello world”
1.4 Node.prototype.textContent
textContent
返回節點及後代節點的文字 ，即獲取文字
這裡和
innerText
一起講：
早期並沒有獲取文字的API ，導致編碼很繁瑣，所以後來IE自己添加了一個API就是
innerText
，然後火狐和opera也推出了
textContent
兩者的區別：
textContent
會獲取所有元素的內容，包括