[TOC]
# DOM
## DOM 的定義
DOM 是一種 API，其作用為在程序中使用 HTML 文檔以及 XML 文檔。在 DOM 中， HTML 文檔與 XML 文檔會以樹形對象集合的形式被使用。這一樹形結構稱為 DOM 樹。
DOM 樹中的一個個對象被稱為節點。節點之間形成了一個樹形結構，樹中的某個節點可能會引用另外一個節點。根據引用關系，分別有父節點、子節點、兄弟節點、祖先節點、子孫節點等類型。
### DOM Level 1
模塊 | 說明
---|---
Core | 對包括 HTML 在內的基本 DOM 操作提供支持
HTML | 對一些專用于 HTML 文檔的方法提供支持
方法名 | 說明
---|---
getElementsByTagName | 根據指定的標簽名來獲取元素
createElement | 創建新元素
appendChild | 插入元素
### DOM Level 2
模塊 | 說明
---|---
Core | Level 1 Core 的擴展
HTML | Level 1 HTML 的擴展
Views | 對與文檔顯示狀態相關的功能提供支持
Events | 對捕獲、冒泡、取消等事件系統提供支持
Styles | 對與樣式表相關的功能提供支持
Traversal and Range | 對 DOM 樹的遍歷以及范圍的指定提供支持
### DOM Level 3
模塊 | 說明
---|---
Core | Level 2 Core 的擴展
Load and Save | 對文檔內容的讀取與寫入提供支持
Validation | 對文檔內容合法性的驗證提供支持
XPath | 對 XPath 相關的功能提供支持
Events | Level 2 Events 的擴展。對鍵盤事件提供了支持
## 元素、節點
元素和節點之間略有一些繼承關系，其中節點是父類概念。節點具有 nodeType 這一屬性，如果其值為 ELEMENT_NODE(1)，該節點則是一個元素。
節點 | 節點類型常量 | 節點類型的值 | 接口
---|---|---|---
元素節點 | ELEMENT_NODE | 1 | Element
屬性節點 | ATTRIBUTE_NODE | 2 | Attr
文本節點 | TEXT_NODE | 3 | Text
注釋節點 | COMMENT_NODE | 8 | Comment
文檔節點 | DOCUMENT_NODE | 9 | Document
## Live 對象的特征
類似 `getELementsByTagName()` 方法獲取到的對象是一個 NodeList 對象，是一個 Live 對象。
Live 對象始終具有 DOM 樹實體的引用。對 DOM 樹做出的變更也會在 Live 對象中得到體現。
## 父節點、子節點、兄弟節點
屬性名 | 能夠獲取的節點
---|---
parentNode | 父節點
childNode | 子節點列表
firstChild | 第一個子節點
lastChild | 最后一個子節點
nextSibling | 下一個兄弟節點
previousSibling | 上一個兄弟節點
此外，空白符也會作為文本節點處理。
還制定了一套用于獲取一些不包含空白節點與注釋節點的元素的API
屬性名 | 能夠獲取的節點
---|---
chidlren | 子元素節點列表
firstElementChild | 第一個子節點
lastElementChild | 最后一個子節點
nextElementSibling | 下一個兄弟節點
previousElementSibling | 上一個兄弟節點
childElementCount | 子元素的數量
## Selector API
`querySelector()` 將只會返回第一個與條件相符的元素。
`querySelectorAll()` 將返回所有符合條件的元素。取得的是一個 StaticNodeList 對象。
StaticNodeList 對象和 NodeList 對象不同點在于，對 StaticNodeList 對象進行修改則不會反應在 HTML 文檔中。
## 節點的內容更改
通過 `replaceChild()` 方法替換節點
```javascript
parentNode.replaceChild(newNode, oldNode);
```
## textContent
`textContent` 屬性可以取得包含子元素在內的純文本部分。
```javascript
element.textContext = '<div> div here </div>'; // 不會創建 div 元素。在瀏覽器中將會直接顯示該字符串
```
## DOM 操作的性能
如果在顯示上發生了變化，瀏覽器則要重新繪制畫面。畫面的重新繪制這一步驟是需要花費開銷的，所以要盡可能避免重新繪制畫面。
使用 `DocumentFragment` 可將畫面的重繪次數降至 1 次。
```javascript
var fragment = document.createDocumentFragment();
for(var i=0; i < 10; i++){
var child = document.createElement('div');
fragment.appendChild(child);
}
document.body.appendChild(fragement);
```
