DOM中如何獲取元素

這篇文章將為大家詳細(xì)講解有關(guān)DOM中如何獲取元素，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

概述

DOM (Document objectModal) ：文檔對(duì)象模型。

DOM：是瀏覽器提供的(瀏覽器特有)，專門用來(lái)操作網(wǎng)頁(yè)內(nèi)容的一些JS對(duì)象。

目的：讓我們可以使用 Js/TS 代碼來(lái)操作頁(yè)面(HTML) 內(nèi)容，讓頁(yè)面“動(dòng)”起來(lái)，從而實(shí)現(xiàn) Web 開(kāi)發(fā)。

HTML：超文本標(biāo)記語(yǔ)言，用來(lái)創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)。

兩者的關(guān)系：瀏覽器根據(jù) HTML 內(nèi)容創(chuàng)建相應(yīng)的 DOM 對(duì)象，也就是:每個(gè) HTML 標(biāo)簽都有對(duì)應(yīng)的 DOM 對(duì)象

獲取元素

常用方法有兩個(gè)：

querySelector (selector)作用：獲取某一個(gè)DOM元素。

queryseletor (selectocu)作用：同時(shí)獲取多個(gè)D0M元素。

獲取一個(gè)DOM元素:

document. querySelector (selector) document 對(duì)象:文檔對(duì)象(整個(gè)頁(yè)面)，是操作頁(yè)面內(nèi)容的入口對(duì)象。 selector 參數(shù):是一個(gè) css 選擇器(標(biāo)簽、類、id 選擇器等)。 作用:查詢(獲取)與選擇器參數(shù)匹配的 DOM 元素，但是，只能獲取到第一個(gè) 推薦使用id選擇器，例如

獲取html中id為title的標(biāo)簽內(nèi)容并在控制臺(tái)輸出：
let title = document.querySelector('#title')
console.log(title)

結(jié)果如下

調(diào)用 querySelector ()通過(guò)id選擇器獲取 DOM 元素時(shí)，拿到的元素類型都是 Element. 因?yàn)闊o(wú)法根據(jù)id來(lái)確定元素的類型，所以，該方法就返回了一個(gè)寬泛的類型:元素(Element) 類型。 不管是 h2 還是 img 都是元素。 導(dǎo)致新問(wèn)題:無(wú)法訪問(wèn) img 元素的 src 屬性了。 因?yàn)? Element 類型只包含所有元素共有的屬性和方法(比如: id 屬性)。

解決方式:使用類型斷言，來(lái)手動(dòng)指定更加具體的類型(比如，此處應(yīng)該比 Element 類型更加具體)。 比如: 解釋:我們確定 id=" image"的元素是圖片元素，所以，我們將類型指定為 HTML ImageElement。

let img1 = document.querySelector('#img1') as HTMLImageElement

img1.src = './img/4.jpg'

技巧:通過(guò) console.dir()打印 DOM 元素,在屬性的最后面，即可看到該元素的類型。

let img1 = document.querySelector('#img1') as HTMLImageElement

img1.src = './img/4.jpg'

console.dir(img1)

獲取多個(gè) DOM元素:

document . querySelectorAll (selector) 作用:獲取所有與選擇器參數(shù)匹配的 DOM 元素，返回值是一個(gè)列表。 推薦:使用 class 選擇器。 示例: let、list = document . querySelectorAll(’.a’) 解釋:獲取頁(yè)面中所有 class 屬性包含 a 的元素。

<p id='title'>歡迎來(lái)到海南大學(xué)</p>
    <p class = ' a'>2020年時(shí)多災(zāi)多難的一年</p>
    <p class="b a">2021年將牛氣沖天</p>
    <img id = 'img1'src="./img/1.jpg" alt="">
    <script src = './index.js'></script>

let list = document.querySelectorAll('.a')

console.log(list)

操作文本內(nèi)容

讀取: dom. innerText 設(shè)置: dom. innerText = ’ 等你下課’ 注意:需要通過(guò)類型斷言來(lái)指定 DOM 元素的具體類型，才可以使用innerText 屬性。 例如

let title = document.querySelector('#title') as HTMLParagraphElement
console.log(title.innerHTML)

追加內(nèi)容如下操作

let title = document.querySelector('#title') as HTMLParagraphElement
title.innerHTML = title.innerHTML + '  陽(yáng)光沙灘美女'
console.log(title.innerHTML)

let list = document.querySelectorAll('.a') 

list.forEach(function (item,index) {
    let p = item as HTMLParagraphElement
    p.innerHTML = '['+index+']'+p.innerHTML
})

關(guān)于“DOM中如何獲取元素”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。