DOM

文檔：DOM中的“D”，當創(chuàng)建一個網(wǎng)頁并把它加載到Web瀏覽器中時，它把編寫的網(wǎng)頁文檔轉(zhuǎn)換為一個文檔對象。

對象：DOM中的“O”,對象是一種自給自足的數(shù)據(jù)集合。與某個特定對象相關(guān)聯(lián)的變量被稱為這個對象的屬性，只能通過某個特定對象去調(diào)用的函數(shù)被稱為這個對象的方法

模型：DOM中的“M”，它是某種事物的表現(xiàn)形式。DOM把一份文檔表示為一顆家譜樹。

節(jié)點

節(jié)點:文檔是由節(jié)點構(gòu)成，節(jié)點是文檔樹上的樹枝和樹葉。

DOM中有許多不同類型的節(jié)點，如元素節(jié)點，文本節(jié)點和屬性節(jié)點。

元素節(jié)點：

標簽的名字就是元素的名字。文本段落元素的名字是“p” ，無序清單元素的名字是“u1”，列表項元素的名字是“1i”。

元素可以包含其他的元素。在我們的“購物清單”文檔里，所有的列表項元素都包含在-一個無序清單元素的內(nèi)部。事實上，沒有被包含在其他元素里的唯一元素是元素， 它是我們的節(jié)點樹的根元素。

文本節(jié)點：

元素節(jié)點只是節(jié)點類型的種。如果一份文檔完全由一 些空白元素構(gòu)成，它將有一個結(jié)構(gòu)，但這份文檔本身將不會包含什么內(nèi)容。在內(nèi)容為王的互聯(lián)網(wǎng)上，絕大多數(shù)內(nèi)容都是由文本提供的。如<p>元素包含著的文本是一 個文本節(jié)點(text node)。
在XHTML文檔里，文本節(jié)點總是被包含在元素節(jié)點的內(nèi)部。但并非所有的元素節(jié)點都包含文本節(jié)點。

屬性節(jié)點：

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

獲取元素

有三種DOM方法可以獲取元素節(jié)點，分別通過元素ID，標簽名字和類名字來獲取。

getElementById（）

DOM提供了一個名為getElementById的方法，這個方法將返回一個與那個有著給定id屬性值的元素節(jié)點對應(yīng)的對象，他說document對象特有的函數(shù)，函數(shù)名的后面必須跟有一對圓括號，這個圓括號包含著函數(shù)的參數(shù)。getElementById方法只有一個參數(shù)，你想獲取的那個元素的id屬性的值必須放在單引號或雙引號里document. getElementById（id）。文檔中的每一個元素都是一個對象。DOM提供的方法能得到任何一個對象。例如：

document. getElementById（“purchases”）`

getElementsByTagName()

getElementsByTagName方法返回一個對象數(shù)組，每個對象分別對應(yīng)著文檔里有著給定標簽的一個元素。這個方法也只有一個參數(shù)，它的參數(shù)是標簽的名字：element.getElementsByTagName(tag) 。
但它返回的是一個數(shù)組，它與getElementById方法有許多相似之處，如：

document. getElementsByTagName("li");

getElementsByClassName()

這個方法可以可以通過Class屬性中的類名來訪問元素。getElementsByClassName只接受一個參數(shù)，就是類名：

getElementsByClassName(class)

這個方法的返回值與getElementsByTagName()類似，都是一個具有相同類名的元素的數(shù)組。如：

document.getElementsByClassName("sale");

使用這個方法還可以查找?guī)в卸鄠€類名的元素，只要在字符串參數(shù)中使用空格分隔類名即可。

總結(jié)：

1、一份文檔就是一顆節(jié)點數(shù)。

2、節(jié)點分為不同類型：元素節(jié)點、屬性節(jié)點、和文本節(jié)點等。

3、getElementById將返回一個對象，該對象對應(yīng)著文檔里的一個特定的元素。

4、getElementsByTagName和getElementsByClassName將返回一個對象數(shù)組，它們分別對應(yīng)著文檔里的一組特定的元素節(jié)點。

5、每個節(jié)點都是一個對象。

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

最新評論