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

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

替代 getElementById()

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

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

後來才發現 querySelector() 這個方法，這個方法跟 jquery 的獲取元素方法是同樣的。裏面填寫的是 css 選擇器。

好比，下面這幾個獲取的元素是同樣的：

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

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

// jquery 方式
$('#username')[0] // 不理解這個能夠百度 `jquery 與 dom 相互轉換`

querySelector() 有兩種方式

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

效果如圖：

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

例子

關於選擇器，參閱： http://www.w3school.com.cn/cs...

好比，如今須要獲取 全部 class 以 text- 開頭的元素，也就是說包含 text-success,text-danger,text-warning 等元素，就這樣寫：

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