3笼蛛、DOM - 簡書

3、DOM

3.1 文檔: DOM中的"D"

如果沒有document(文檔)，DOM也就無從談起。

window對象對應著瀏覽器窗口本身, 這個對象的屬性和方法通常成為BOM(瀏覽器對象模型), BOM提供了window.open 和 window.blur等方法灵寺。

DOM中的"M"代表著"Model"(模型), 但說它代表著"Map"(地圖)也未嘗不可。

節(jié)點這個詞是一個網(wǎng)絡術(shù)語, 它標識網(wǎng)絡中的一個連接點区岗。一個網(wǎng)絡就是由一些節(jié)點構(gòu)成的集合略板。

DOM的原子是元素節(jié)點
標簽名字:標簽的名字就是元素的名字,文本鍛煉元素的名字是"p",無需清單元素的名字是"ul"
元素可以包含其他元素, 實際上, 沒有被包含在其他元素里的唯一元素就是<html>元素, 它是我們的節(jié)點樹的根元素。

<!-- p元素 -->
<p></p>

在HTML文檔里, 文本節(jié)點總是被包含在元素節(jié)點的內(nèi)部慈缔。但并非所有的元素節(jié)點都包含有文本節(jié)點叮称。

<!-- p標簽中的內(nèi)容 是 文本節(jié)點 -->
<p>文本節(jié)點</p>

屬性節(jié)點用來對元素做出更具體的描述。例如: 幾乎所有的元素都有一個title屬性, 而我們可以利用這個屬性對包含在元素里的東西做出準確的描述。

<p title="a gentle reminder">Don't forget to buy this stuff.</p>
在DOM中, title="a gentle reminder"是一個屬性節(jié)點.

CSS(層疊樣式表)告訴瀏覽器應該怎樣顯示一份文檔內(nèi)容瓤檐。

有3種DOM方法可以獲取元素節(jié)點, 分別是通過元素ID赂韵、通過標簽名和通過類名來獲取。

document.getElementById(id)
document.getElementById("id_name")

document.getElementsByTagName("p")

這個調(diào)用將返回一個對象數(shù)組, 每個對象分貝對應這個document對象中的一個列表項元素挠蛉。

document.getElementsByTagName("p").length

document.getElementsByClassName("class_name")

這個方法返回值與getElementByTagName類似, 都是一個具有相同類名的元素的數(shù)組祭示。

一份文檔就是一顆節(jié)點樹。
節(jié)點分為不同的類型: 元素節(jié)點谴古、屬性節(jié)點和文本節(jié)點等绍移。
getElementById 返回一個對象, 該對象對應著文檔里的一個特定的元素節(jié)點。
getElementByTagName 和 getElementsByClassName 將返回一個對象數(shù)組, 他們分別對應著文檔的一組特定的元素節(jié)點讥电。
每個節(jié)點都是一個對象。

getAttribute是一個函數(shù), 它只有哦一個參數(shù)--要查詢的屬性的名字:

object.getAttribute(attribute)

注意:getAttribute方法不屬于document對象, 所以不能通過document對象調(diào)用轧抗。它只能通過元素節(jié)點對象調(diào)用恩敌。

setAttribute()允許我們隊屬性節(jié)點的值做出修改, 與getAttribute一樣, setAttribute也只能用于元素節(jié)點。

object.setAttribute(attribute, value)

最后編輯于：2018.03.06 23:58:03

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者