JavaScript如何獲取dom元素querySelector()替代getElementById()

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

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

替代 getElementById()

很長(zhǎng)一段時(shí)間以來(lái)，除了 jQuery 的選擇器之外，我一直在用下面這幾個(gè)方法獲取 dom 元素

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

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

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

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

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

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

querySelector() 有兩種方式

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

效果如圖：

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

例子

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

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

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

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