3.1 文檔: DOM中的"D"
如果沒有document(文檔)，DOM也就無從談起。
3.2 對象: DOM中的"O"
1. JavaScript語言里的對象
- 用戶定義對象(user-defined object): 由程序員自行穿件的對象。
- 內(nèi)建對象(native object): 內(nèi)建在JavaScript語言里的對象, 如:Array, Math和Date等。
- 宿主對象(host object):由瀏覽器提供的對象。
2. BOM
window對象對應(yīng)著瀏覽器窗口本身, 這個對象的屬性和方法通常成為BOM(瀏覽器對象模型), BOM提供了window.open 和 window.blur等方法。
3.3 模型: DOM中的"M"
DOM中的"M"代表著"Model"(模型), 但說它代表著"Map"(地圖)也未嘗不可。
3.4 節(jié)點
節(jié)點這個詞是一個網(wǎng)絡(luò)術(shù)語, 它標(biāo)識網(wǎng)絡(luò)中的一個連接點。一個網(wǎng)絡(luò)就是由一些節(jié)點構(gòu)成的集合。
- 元素節(jié)點
- 文本節(jié)點
- 屬性節(jié)點
1. 元素節(jié)點
DOM的原子是元素節(jié)點
標(biāo)簽名字:標(biāo)簽的名字就是元素的名字,文本鍛煉元素的名字是"p",無需清單元素的名字是"ul"
元素可以包含其他元素, 實際上, 沒有被包含在其他元素里的唯一元素就是<html>元素, 它是我們的節(jié)點樹的根元素。
<!-- p元素 -->
<p></p>
2. 文本節(jié)點
在HTML文檔里, 文本節(jié)點總是被包含在元素節(jié)點的內(nèi)部。但并非所有的元素節(jié)點都包含有文本節(jié)點。
<!-- p標(biāo)簽中的內(nèi)容 是 文本節(jié)點 -->
<p>文本節(jié)點</p>
3. 屬性節(jié)點
屬性節(jié)點用來對元素做出更具體的描述。例如: 幾乎所有的元素都有一個title屬性, 而我們可以利用這個屬性對包含在元素里的東西做出準(zhǔn)確的描述。
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
在DOM中, title="a gentle reminder"是一個屬性節(jié)點.
4. CSS
CSS(層疊樣式表)告訴瀏覽器應(yīng)該怎樣顯示一份文檔內(nèi)容。
4. 獲取元素
有3種DOM方法可以獲取元素節(jié)點, 分別是通過元素ID、通過標(biāo)簽名和通過類名來獲取。
1. getElementById (通過ID)
document.getElementById(id)
document.getElementById("id_name")
2. getElementByTagName (通過標(biāo)簽名)
document.getElementsByTagName("p")
這個調(diào)用將返回一個對象數(shù)組, 每個對象分貝對應(yīng)這個document對象中的一個列表項元素。
document.getElementsByTagName("p").length
3. getElementsByClassName (通過類名)
document.getElementsByClassName("class_name")
這個方法返回值與getElementByTagName類似, 都是一個具有相同類名的元素的數(shù)組。
5. 盤點
- 一份文檔就是一顆節(jié)點樹。
- 節(jié)點分為不同的類型: 元素節(jié)點、屬性節(jié)點和文本節(jié)點等。
- getElementById 返回一個對象, 該對象對應(yīng)著文檔里的一個特定的元素節(jié)點。
- getElementByTagName 和 getElementsByClassName 將返回一個對象數(shù)組, 他們分別對應(yīng)著文檔的一組特定的元素節(jié)點。
- 每個節(jié)點都是一個對象。
3.5 獲取和設(shè)置屬性
1. getAttribute (獲取屬性)
getAttribute是一個函數(shù), 它只有哦一個參數(shù)--要查詢的屬性的名字:
object.getAttribute(attribute)
注意:getAttribute方法不屬于document對象, 所以不能通過document對象調(diào)用。它只能通過元素節(jié)點對象調(diào)用。
2. setAttribute (設(shè)置屬性)
setAttribute()允許我們隊屬性節(jié)點的值做出修改, 與getAttribute一樣, setAttribute也只能用于元素節(jié)點。
object.setAttribute(attribute, value)
3.6 小結(jié)
- getElementById
- getElementByTagName
- getElementsByClassName
- getAttribute
- setAttribute
