App下載

DOM操作_獲取元素

特級不保護動物 2021-01-12 15:16:49 瀏覽數(shù) (3169)
反饋

概述

DOM (Document objectModal) :文檔對象模型。

DOM:是瀏覽器提供的(瀏覽器特有),專門用來操作網(wǎng)頁內(nèi)容的一些JS對象。

目的:讓我們可以使用 Js/TS 代碼來操作頁面(HTML) 內(nèi)容,讓頁面“動”起來,從而實現(xiàn) Web 開發(fā)。

HTML:超文本標記語言,用來創(chuàng)建網(wǎng)頁結(jié)構(gòu)。

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

獲取元素

常用方法有兩個:

querySelector (selector)作用:獲取某一個DOM元素。

queryseletor (selectocu)作用:同時獲取多個D0M元素。

獲取一個DOM元素:

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

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

結(jié)果如下 在這里插入圖片描述

調(diào)用 querySelector ()通過id選擇器獲取 DOM 元素時,拿到的元素類型都是 Element. 因為無法根據(jù)id來確定元素的類型,所以,該方法就返回了一個寬泛的類型:元素(Element) 類型。 不管是 h1 還是 img 都是元素。 導(dǎo)致新問題:無法訪問 img 元素的 src 屬性了。 因為: Element 類型只包含所有元素共有的屬性和方法(比如: id 屬性)。

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

let img1 = document.querySelector('#img1') as HTMLImageElement
?
img1.src = './img/4.jpg'
如何知道元素的屬性?

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

let img1 = document.querySelector('#img1') as HTMLImageElement
?
img1.src = './img/4.jpg'
?
console.dir(img1)


獲取多個 DOM元素:

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

html中的內(nèi)容如下
<p id='title'>歡迎來到海南大學</p>
   <p class = ' a'>2020年時多災(zāi)多難的一年</p>
   <p class="b a">2021年將牛氣沖天</p>
   <img id = 'img1'src="./img/1.jpg" alt="">
   <script src = './index.js'></script>
ts 中的內(nèi)容如下
let list = document.querySelectorAll('.a')
?
console.log(list)
運行結(jié)果如下


操作文本內(nèi)容

讀取: dom. innerText 設(shè)置: dom. innerText = ’ 等你下課’ 注意:需要通過類型斷言來指定 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 + ' 陽光沙灘美女'
console.log(title.innerHTML)
給所有p標簽的內(nèi)容加上索引
let list = document.querySelectorAll('.a') 
?
list.forEach(function (item,index) {
   let p = item as HTMLParagraphElement
   p.innerHTML = '['+index+']'+p.innerHTML
})

輸出結(jié)果如下:




0 人點贊