原生 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-']")