什么是DOM
DOM（文檔對象模型）是針對HTML和XML文檔的一個API，通過DOM可以去改變文檔。
這個說法很官方，大家肯定還是不明白。
簡而言之，DOM可以理解為一個訪問或操作HTML各種標簽的實現標準。比如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
</body>
</html>
比如我們在這個HTML模板中如何獲取title標簽里的內容？
下面是DOM節點樹
document 對象
每個載入瀏覽器的HTML文檔都會成為document對象。document對象包含了文檔的基本信息，我們可以通過JavaScript對HTML頁面中的所有元素進行訪問、修改。
document 對象常用屬性
- doctype
- head
- body
location
location屬性返回一個只讀對象，提供了當前文檔的URL信息.
document.location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"
document.location.host // "www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"
document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document.location.password // "passed"
// 跳轉到另一個網址
document.location.assign('http://www.google.com')
// 優先從服務器重新加載
document.location.reload(true)
// 優先從本地緩存重新加載（默認值）
document.location.reload(false)
// 跳轉到另一個網址，但當前文檔不保留在history對象中，
// 即無法用后退按鈕，回到當前文檔
document.location.assign('http://www.google.com')
// 將location對象轉為字符串，等價于document.location.href
document.location.toString()
雖然location屬性返回的對象是只讀的，但是可以將URL賦值給這個屬性，網頁就會自動跳轉到指定網址。
document.location = 'http://www.example.com';
// 等價于
document.location.href = 'http://www.example.com';
title、characterSet
title屬性返回當前文檔的標題，該屬性是可寫的
characterSet屬性返回渲染當前文檔的字符集
** innerHTML、outerHTML、innerText **
獲取里面的內容，必須是元素為ID的元素
innerHTML 獲取元素內部的標簽和內容
outerHTML 獲取元素所有的標簽和內容，包括自身的標簽
innerText 獲取元素的文本內容
document對象常用方法
open() 、close()、write()
document.open方法用于新建一個文檔，供write方法寫入內容。它實際上等于清除當前文檔，重新寫入內容
document.close方法用于關閉open方法所新建的文檔。一旦關閉，write方法就無法寫入內容了。
Element
Element有幾個重要屬性
- nodeName：元素標簽名，還有個類似的tagName
- nodeType：元素類型
- className：類名
- id：元素id
- children：子元素列表（HTMLCollection）
- childNodes：子元素列表（NodeList）
- firstChild：第一個子元素
- lastChild：最后一個子元素
- nextSibling：下一個兄弟元素
- previousSibling：上一個兄弟元素
- parentNode、parentElement：父元素
添加元素
createElement()
createElement方法用來生成HTML元素節點。createElement方法的參數為元素的標簽名，即元素節點的tagName屬性。如果傳入大寫的標簽名，會被轉為小寫。如果參數帶有尖括號（即<和>）或者是null，會報錯。
createTextNode()
createTextNode方法用來生成文本節點，參數為所要生成的文本節點的內容。
刪除元素
刪除元素使用removeChild()方法即可
修改元素
appendChild()
在元素末尾添加元素
insertBefore()
insertBefore() 方法在您指定的已有子節點之前插入新的子節點。
document.getElementById("myList").insertBefore(newItem,existingItem);
在某個元素之前插入元素
replaceChild()
replaceChild()接受兩個參數：要插入的元素和要替換的元素
查詢元素
getElementById()
getElementById方法返回匹配指定ID屬性的元素節點。如果沒有發現匹配的節點，則返回null。這也是獲取一個元素最快的方法
getElementsByClassName()
getElementsByClassName方法返回一個類似數組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結果中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。
getElementsByClassName方法的參數，可以是多個空格分隔的class名字，返回同時具有這些節點的元素。
getElementsByTagName()
getElementsByTagName方法返回所有指定標簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象，也就是說，搜索結果是一個動態集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。
getElementsByName()
getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化。
querySelector()
querySelector方法返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null。
querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節點，返回的是NodeList類型的對象。NodeList對象不是動態集合，所以元素節點的變化無法實時反映在返回結果中。
elem.children和elem.childNodes的區別？
elem.children 只會返回其包含的子元素節點，不會返回空白（文本）節點
elem.childNodes 返回所有的節點包括空白（文本）節點。
屬性操作
getAttribute()
getAttribute()用于獲取元素的attribute值
createAttribute()
createAttribute()方法生成一個新的屬性對象節點，并返回它。
setAttribute()
setAttribute()方法用于設置元素屬性
romoveAttribute()
removeAttribute()用于刪除元素屬性
相關文檔參考
What is the DOM?
各瀏覽器中的 NodeList 接口存在差異
Difference between HTMLCollection, NodeLists, and arrays of objects
饑人谷
