DOM（文檔對象模型）是針對HTML和XML文檔的一個API（應用程序編程接口），它描繪了一個層次化的節點樹。
Node類型
1. Node.ELEMENT_NODE 元素節點
2. Node.ATTRIBUTE_NODE 屬性節點
3. Node.TEXT_NODE 文本節點
4. Node.CDATA_SECTION_NODE CDATA節點（只針對XML文檔，表示CDATA區域）
5. Node.ENTITY_REFERENCE_NODE 實體引用名稱節點
6. Node.ENTITY_NODE 實體名稱節點
7. Node.PROCESSING_INSTRUCTION_NODE 處理指令節點
8. Node.COMMENT_NODE 註釋節點
9. Node.DOCUMENT_NODE 文檔節點
10. Node.DOCUMENT_TYPE_NODE 文檔類型節點
11. Node.DOCUMENT_FRAGMENT_NODE 文檔片段節點
12. Node.NOTATION_NODE DTD聲明節點
【屬性】
• nodeType 與數值（1-12）比較
• nodeName 返回元素的標籤名
• nodeValue
• childList （firefox3.6+ & chrome）
操作類名的方法
- X.childList.add(類名)
- X.childList.contains(類名)
- X.childList.remove(類名)
- X.childList.toggle(類名) 如果存在，刪除；如果不存在，添加
• childElementCount 返回子元素個數（不包含文本節點和註釋節點）
• firstElementChild 返回第一個元素（firstChild元素版）
• lastElementChild 返回最後一個元素（lastChild元素版）
• previousElementSibilng 返回前輩元素（previousSibling元素版）
• nextElementSibling 返回後輩元素 （nextSibling元素版）
• 自定義屬性 (加上前綴data,比如data-xx，使用時dataset.xx) （firefox6+ & chrome）
• innerHTML （寫入時會改變DOM子樹）
讀取時返回or替換所有子節點，寫入後會替換原來所以子節點
(不支持inner HTML的元素：col、colgroup、frameset、head、html、style、table、tbody、thead、tfoot、tr)
• innerText（寫入時會改變DOM子樹，永遠只會生成當前元素的一個子文本節點）
讀取時，將文檔樹的所有文本拼接起來；寫入時，刪除元素的所有子節點，插入文本
不支持innerText屬性的瀏覽器可以使用textContent屬性。
textContent還會返回行內樣式和行內腳本代碼，innerText則會忽略行內樣式和行內腳本。
• outerHTML （寫入時會改變DOM子樹）
讀取時返回or替換調用它的元素及其所有子節點，寫入後替換元素x的整個DOM樹
• outerText （不常用)
讀取時，與innerText結果一樣；寫入時，新的文本節點會完全替換整個元素
• insertAdjacentHTML(插入位置，要插入的HTML文本)
插入位置四種值
- beforebegin 在當前元素前插入同胞元素
- afterbegin 在當前元素下插入新的子元素/在第一個子元素前插入新的子元素
- beforeend 在當前元素下插入新的子元素/在最後一個子元素後插入新的子元素
- afterend 在當前元素後插入同胞元素
！使用innerHTML、outerHTML、insertAdjacentHTML前，要手工刪除被替換元素的所有事件處理程序和js對象屬性，不然會導致內存佔用問題。當插入大量新HTML標記，使用這三個方法比多次使用DOM操作先創建節點再指定關係相比，效率要高得多。使用時，先單獨構建字符串，最後再一次性把結果字符串賦給innerHTML
【關係】
每個節點都有一個childNodes屬性，其中保留着一個NodeList對象（類數組，保存一組有序的節點，它基於DOM結構動
態變化，可用方括號或item()訪問其中的節點）
x.children 元素只包含元素子節點
x.childNodes可能還包含空白符
每個節點都有一個parentNode屬性，指向文檔樹的父節點。包含在childNodes列表中的所有節點有相同的父節點。
X.parentNode
包含在childNodes列表中的每個節點，相互間爲同胞節點
X.previousSibling (第一個節點的previousSibling爲null)
X.nextSibling （最後一個節點的nextSibling爲null）
其他關係
X.firstChild
X.lastChild
X.ownerDocument 指向表示整個文檔的文檔節點
【方法】
• 判斷是否有子節點
x.hasChildNodes() //返回true/false
• 在childNodes列表最後增加新節點
x.appendChild(新節點) //返回新節點
• 在childNodes列表中，在參照節點前，插入新節點 x.insertBefore(新節點，參照節點) //返回新節點
• 在childNodes列表中替換節點
x.replaceChild(新節點，被替換節點) //返回被替換的節點
• 移除childNodes列表中的節點
x.removeChild(被移除的節點) //返回被移除的節點
• 複製節點副本
○ 深複製(複製節點&其子節點樹) x.cloneNode(true)
○ 淺複製(只複製節點本身) x.cloneNode(false)
？深複製和淺複製區別：
深複製：（遞歸）結果副本與原本指向兩個不同的內存地址
淺複製：結果副本與原本指向同一個內存地址
• 處理文檔樹中的文本節點(刪除不包含文本的文本節點、合併相鄰的文本節點)
X.normalize()
• 滾動元素的容器時，元素出現在視口中
X.scrollIntoView()
• 滾動元素容器，元素出現。當alignCenter爲true時，元素顯示在視口中部
X.scrollIntoViewIfNeeded(alignCenter)
• 將元素內容滾動指定的行高
X.scrollByLines(行高)
• 將元素內容滾動指定的頁面高度
X.scrollByPages(頁面高度)
• 確定節點xx是否爲節點x的後代
x.contains(xx) 返回true/false
• 確定節點間的關係，返回表示關係的位掩碼 x.compareDocumentPosition(xx)
1：無關
2：xx居前
4：xx局後
8：xx包含x
16：xx被x包含