Javascript中DOM、節(jié)點(diǎn)和獲取元素的示例分析

這篇文章給大家分享的是有關(guān)Javascript中DOM、節(jié)點(diǎn)和獲取元素的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

DOM

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

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

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

節(jié)點(diǎn)

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

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

元素節(jié)點(diǎn)：

標(biāo)簽的名字就是元素的名字。文本段落元素的名字是“p” ，無(wú)序清單元素的名字是“u1”，列表項(xiàng)元素的名字是“1i”。

元素可以包含其他的元素。在我們的“購(gòu)物清單”文檔里，所有的列表項(xiàng)元素都包含在-一個(gè)無(wú)序清單元素的內(nèi)部。事實(shí)上，沒(méi)有被包含在其他元素里的唯一元素是元素， 它是我們的節(jié)點(diǎn)樹(shù)的根元素。

文本節(jié)點(diǎn)：

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

屬性節(jié)點(diǎn)：

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

獲取元素

有三種DOM方法可以獲取元素節(jié)點(diǎn)，分別通過(guò)元素ID，標(biāo)簽名字和類名字來(lái)獲取。

getElementById（）

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

document. getElementById（“purchases”）`

getElementsByTagName()

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

document. getElementsByTagName("li");

getElementsByClassName()

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

getElementsByClassName(class)

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

document.getElementsByClassName("sale");

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

感謝各位的閱讀！關(guān)于“Javascript中DOM、節(jié)點(diǎn)和獲取元素的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！