Javascript DOM的簡介,節(jié)點和獲取元素詳解
DOM
文檔:DOM中的“D”,當(dāng)創(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é)點:
標(biāo)簽的名字就是元素的名字。文本段落元素的名字是“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屬性,我們可以利用這個屬性對包含在元素里的東西做出準(zhǔn)確的描述,屬性節(jié)點總是包含在元素節(jié)點中。
獲取元素
有三種DOM方法可以獲取元素節(jié)點,分別通過元素ID,標(biāo)簽名字和類名字來獲取。
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)著文檔里有著給定標(biāo)簽的一個元素。這個方法也只有一個參數(shù),它的參數(shù)是標(biāo)簽的名字: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)容!
相關(guān)文章
解決layui的table插件無法多層級獲取json數(shù)據(jù)的問題
今天小編就為大家分享一篇解決layui的table插件無法多層級獲取json數(shù)據(jù)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript 對象深入學(xué)習(xí)總結(jié)(經(jīng)典)
JavaScript中,除了五種原始類型(即數(shù)字,字符串,布爾值,null,undefined)之外的都是對象了,所以,不把對象學(xué)明白怎么繼續(xù)往下學(xué)習(xí)呢?本篇文章給大家分享javascript對象深入學(xué)習(xí)總結(jié),小伙伴們跟著小編一起深入學(xué)習(xí)吧2015-09-09