這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)JavaScript如何獲取dom元素querySelector()替代getElementById()，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

虞城網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),虞城網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為虞城1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的虞城做網(wǎng)站的公司定做！

原生 js 獲取 dom 元素 querySelector() 替代 getElementById()

替代 getElementById()

很長一段時間以來，除了 jQuery 的選擇器之外，我一直在用下面這幾個方法獲取 dom 元素

document.getElementById()document.getElementsByClassName()document.getElementsByTagName()document.getElementsByName()

后來才發(fā)現(xiàn) querySelector() 這個方法，這個方法跟 jquery 的獲取元素方法是一樣的。里面填寫的是 css 選擇器。

比如，下面這幾個獲取的元素是一樣的：

// getElementById() 方式
document.getElementById('username');

// querySelector() 方式
document.querySelector('#username');

// jquery 方式
$('#username')[0] // 不理解這個可以百度 `jquery 與 dom 相互轉(zhuǎn)換`

querySelector() 有兩種方式

querySelector( css選擇器字符串 )     // 獲取第一個匹配元素
querySelectorAll( css選擇器字符串 )  // 獲取所有匹配元素

效果如圖：

其獲取元素的方式跟 jquery 很像，但取到的元素并不一樣，jquery 取得的是 jquery 元素，而 querySelector() 獲取的是 dom 對象。

例子

關(guān)于選擇器，參閱： http://www.w3school.com.cn/cs...

比如，現(xiàn)在需要獲取 所有 class 以 text- 開頭的元素，也就是說包含 text-success,text-danger,text-warning 等元素，就這樣寫：

document.querySelectorAll("[class^='text-']")

上述就是小編為大家分享的JavaScript如何獲取dom元素querySelector()替代getElementById()了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前名稱：JavaScript如何獲取dom元素querySelector()替代getElementById()
文章源于：http://www.rwnh.cn/article2/jjspic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設(shè)、面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化、小程序開發(fā)、自適應(yīng)網(wǎng)站、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)