更新時(shí)間:2022-06-09 來(lái)源:黑馬程序員 瀏覽量:
DOM對(duì)象本質(zhì)上是瀏覽器根據(jù)html標(biāo)簽生成的 JS對(duì)象,它的所有的標(biāo)簽屬性都可以在這個(gè)
JS對(duì)象上面找到,修改這個(gè)對(duì)象的屬性會(huì)自動(dòng)映射到標(biāo)簽身上。DOM的核心思想是把網(wǎng)頁(yè)內(nèi)容當(dāng)做對(duì)象來(lái)處理。其中document 對(duì)象是DOM
里提供的一個(gè)對(duì)象,所以它提供的屬性和方法都是用來(lái)訪問(wèn)和操作網(wǎng)頁(yè)內(nèi)容的,網(wǎng)頁(yè)中所有的內(nèi)容在document里面。document與其他網(wǎng)頁(yè)中各個(gè)節(jié)點(diǎn)元素關(guān)系如下:
將 HTML 文檔以樹(shù)狀結(jié)構(gòu)直觀的表現(xiàn)出來(lái),我們稱之為文檔樹(shù)或 DOM 樹(shù)。文檔樹(shù)模型直觀的體現(xiàn)了標(biāo)簽與標(biāo)簽之間的關(guān)系。
獲取DOM對(duì)象
1. 根據(jù)CSS選擇器來(lái)獲取DOM元素
(1)匹配單個(gè)元素一個(gè)元素
這里選擇的語(yǔ)法如下:
document.querySelector('css選擇器')
參數(shù)包含一個(gè)或多個(gè)有效的CSS選擇器 字符串,返回值CSS選擇器匹配的第一個(gè)元素,一個(gè) HTMLElement對(duì)象。如果沒(méi)有匹配到,則返回null。
(2)選擇匹配的多個(gè)元素
語(yǔ)法如下:
document.querySelectorAll('ul li')
參數(shù)包含一個(gè)或多個(gè)有效的CSS選擇器 字符串,返回值CSS選擇器匹配的NodeList 對(duì)象集合,例如:
document.querySelectorAll('ul li')
document.querySelectorAl1('css選擇器')
得到的是一個(gè)偽數(shù)組: 有長(zhǎng)度有索引號(hào)的數(shù)組,但是沒(méi)有 pop() push() 等數(shù)組方法,想要得到里面的每一個(gè)對(duì)象,則需要遍歷(for)的方式獲得。
注意:哪怕只有一個(gè)元素,通過(guò)querySelectAll() 獲取過(guò)來(lái)的也是一個(gè)偽數(shù)組,里面只有一個(gè)元素而已