什么是DOM？
DOM：Document Object Model
DOM翻譯過來是文檔對象模型，是HTML和XML文檔的編程接口。它提供了對文檔的結構化的表述，并定義了一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容。DOM 將文檔解析為一個由節點和對象（包含屬性和方法的對象）組成的結構集合。簡言之，它會將web頁面和腳本或程序語言連接起來。
說白了DOM就是瀏覽器為JavaScript提供的一系列接口，通過這些接口我們可以操作web頁面。
DOM節點
DOM的最小組成單位叫做節點（node）。文檔的樹形結構（DOM樹），就是由各種不同類型的節點組成。節點有以下7種類型
Document：整個文檔樹的頂層節點（root node）
DocumentType: doctype標簽
Element：網頁的各種HTML標簽
Attribute：網頁元素的屬性
Text：標簽之間包含的文本內容
Comment：注釋
DocumentFragment：文檔片段
節點間的關系
除了根節點，它的下級節點與周圍節點存在三種關系
父節點關系：parentNode
子節點關系：childNodes
firstChild：第一個子節點
lastChild：最后一個子節點
同級節點關系：sibling
nextSibling：緊鄰在后的那個同級節點
previousSibling：緊鄰在前的那個同級節點
DOM API 獲取元素的 N 種方法
（1） 通過頂層document節點獲取：
? ? 1. 通過ID獲取元素
doument.getElementById(“elementId”)
返回擁有指定id的第一個元素，id為大小寫敏感的字符串，如果不存在則返回null。如果頁面上含有多個相同id的節點，那么只返回第一個節點。
? ?2. 通過節點名獲取元素
document.getElementsByName(“elementsName”)
name 為字符串(String)，該方法是通過節點的name獲取節點，返回的有同樣名稱的節點數組。通過要獲取節點的某個屬性來循環判斷是否為需要的節點
? ?3. 通過節點標簽名稱獲取元素
document.getElementByTagName(“tagName”)
該方法是通過節點的Tag獲取節點，該方法與document.getElementsByName()相似,同樣返回一個數組
? ?4. 通過元素類名獲取元素
document.getElementsClassName(“classname”)
同樣返回的是一個數組,當調用發生在document對象上時, 整個DOM都會被搜索, 包含根節點
?5. querySelector 和querySelectorall
querySelector:
語法：element = document.querySelector(selectors)，接受一個css選擇器作為參數，返回匹配該選擇器的第一個節點，如果沒有匹配的節點返回null。selectors是一個字符串，包含一個或者多個css選擇器，多個以逗號分隔。
querySelectorAll:
該方法返回所有滿足條件的元素，結果是個nodeList集合。
（2） 通過父節點獲取：
? 1. parentObj.firstChild：如果節點為已知節點（parentObj）的第一個子節點就可以使用這個方法。這個屬性是可以遞歸使用的，也就是支持parentObj.firstChild.firstChild.firstChild...的形式，如此就可以獲得更深層次的節點。
? 2. parentObj.lastChild：很顯然，這個屬性是獲取已知節點（parentObj）的最后一個子節點。與firstChild一樣，它也可以遞歸使用。
? 3. parentObj.childNodes：獲取已知節點的子節點數組，然后可以通過循環或者索引找到需要的節點。
? 4. parentObj.children：獲取已知節點的直接子節點數組。
? 5. parentObj.getElementsByTagName(tagName)：使用方法不再贅述，它返回已知節點的所有子節點中類型為指定值的子節點數組。例如：parentObj.getElementsByTagName('A')返回已知的子節點中的所有超鏈接。
（3） 通過臨近節點獲取：
1. neighbourNode.previousSibling：獲取已知節點（neighbourNode）的前一個節點，這個屬性和前面的firstChild、lastChild一樣都似乎可以遞歸使用的。
2. neighbourNode.nextSibling：獲取已知節點（neighbourNode）的下一個節點，同樣支持遞歸。
（4） 通過子節點獲取：
? ?childNode.parentNode：獲取已知節點的父節點。
