# DOM
- <a href="#no1">3.1 文檔：DOM中的“D”</a>
- <a href="#no2">3.2 對象：DOM中的“O”</a>
- <a href="#no3">3.3 模型：DOM中的“M”</a>
- <a href="#no4">3.4 節點</a>
- <a href="#no5">3.5 獲取和設置屬性</a>
- <a href="#no6">3.6 小結</a>
**本章內容**
- 節點的概念
- 5個常用的DOM方法：`getElementById`、`getElementsByTagName`、`getElementsByClassName`、`getAttribute`和`setAttribute`。
##<a name="no1">3.1 文檔：DOM中的“D”</a>
> 如果沒有 `document`（文檔），DOM也就無從談起。當創建了一個網頁并把它加載到web瀏覽器中時，DOM就在幕后悄然而生。它把你編寫的網頁文檔轉換為一個文檔對象。
##<a name="no2">3.2 對象：DOM中的“O”</a>
> `JavaScript`里的對象可以分為三種類型：
1. 用戶定義對象（`user-defined object`）:由程序員自行創建的對象。
2. 內建對象（`native object`）：內建在`JavaScript`語言里的對象，如`Array`、`Math`和`Date`等。
3. 宿主對象（`hose objecy`）：由瀏覽器提供的對象。
##<a name="no3">3.3 模型：DOM中的“M”</a>
> DOM中的“M”代表著“Model”（模型），是某種實物的表現形式。
##<a name="no4">3.4 節點</a>
> 節點（node）標識網絡中的一個連接點，一個網絡就是由一些節點構成的集合。
**3.4.1 元素節點**
> DOM的原子是元素節點（element node）。
**3.4.3 文本節點**
<p>這里是文本節點demo</p>
> 如上所示：`<p>這里是文本節點demo</p>`中包含的問本【這里是文本節點demo】,它是一個文本節點（text node）。
**3.4.3 屬性節點**
> 屬性節點用來對元素做出更具體的描述。（attribute node）。
**3.4.4 CSS**
1. class 屬性：你可以在所有的元素上任意應用 class 屬性。
2. id 屬性：id 屬性的用途是給網頁里的某個元素加上一個獨一無二的標識符。
**3.4.5 獲取元素**
> 有3中DOM方法可以獲取元素節點，分別是通過元素ID、通過標簽名字和通過類名字來獲取。
1. `getElementById`：返回一個與有著給定`id`屬性值的元素節點對應的對象。
2. `getElementsByTagName`：返回一個對象數組，每個對象分別對應著文檔里有著給定標簽的一個元素。
3. `getElementsByClassName`：這個方法可以通過`class`屬性中的類名來訪問元素。返回值與`getElementByTagName`類似，都是一個具有想同類名的元素的數組。
**3.4.6 盤點知識點**
- 一份文檔就是一顆節點樹。
- 節點分為不同的類型：元素節點、屬性節點和文本節點等。
- `getElementById`返回一個對象，該對象對應著文檔里的一個特定的元素節點。
- `getElementsByTagName`和`getElementsByClassName`返回一個對象數組，分別對應著文檔里的一組特定的元素節點。
- 每個節點都是一個對象。
##<a name="no5">3.5 獲取和設置屬性</a>
**3.5.1 getAttribute**
> `getAttribute`是一個函數。它只有一個參數——你打算查詢的屬性的名字：
object.getAttribute(attribute)
**它只能通過元素節點對象調用。**
例：
var paras = document.getElementsByTagName('p');
for(var i=0;i < paras.length; i++){
console.log(paras[i].getAttribute('title'));
}
**3.5.2 setAttribute**
> `setAttribute`允許對屬性節點的值做出修改，也只能用于元素節點。
object.setAttribute(attribute, value);
##<a name="no6">3.6 小結</a>
**本章介紹了DOM提供的五個方法：**
1. getElementById
2. getElementsByTagName
3. getElementsByClassName
4. getAttribute
5. setAttribute
