首頁技術文章正文

什么是DOM對象?如何獲取DOM對象?

更新時間:2022-06-09 來源:黑馬程序員 瀏覽量:

DOM對象本質上是瀏覽器根據html標簽生成的 JS對象,它的所有的標簽屬性都可以在這個 JS對象上面找到,修改這個對象的屬性會自動映射到標簽身上。DOM的核心思想是把網頁內容當做對象來處理。其中document 對象是DOM 里提供的一個對象,所以它提供的屬性和方法都是用來訪問和操作網頁內容的,網頁中所有的內容在document里面。document與其他網頁中各個節(jié)點元素關系如下:

DOM對象

將 HTML 文檔以樹狀結構直觀的表現出來,我們稱之為文檔樹或 DOM 樹。文檔樹模型直觀的體現了標簽與標簽之間的關系。

獲取DOM對象

1. 根據CSS選擇器來獲取DOM元素

(1)匹配單個元素一個元素

這里選擇的語法如下:

document.querySelector('css選擇器')

參數包含一個或多個有效的CSS選擇器 字符串,返回值CSS選擇器匹配的第一個元素,一個 HTMLElement對象。如果沒有匹配到,則返回null。

(2)選擇匹配的多個元素

語法如下:

document.querySelectorAll('ul li')

參數包含一個或多個有效的CSS選擇器 字符串,返回值CSS選擇器匹配的NodeList 對象集合,例如:

document.querySelectorAll('ul li')
document.querySelectorAl1('css選擇器')

得到的是一個偽數組: 有長度有索引號的數組,但是沒有 pop() push() 等數組方法,想要得到里面的每一個對象,則需要遍歷(for)的方式獲得。

注意:哪怕只有一個元素,通過querySelectAll() 獲取過來的也是一個偽數組,里面只有一個元素而已


分享到:
在線咨詢 我要報名
和我們在線交談!