HTML5向Web API新引入了
document.querySelector
document.querySelectorAll
兩個(gè)方法用來(lái)更方便地從DOM選取元素,功能類似于jQuery的選擇器。這使得在編寫(xiě)原生JavaScript代碼時(shí)方便了許多旧找。
querySelector
該方法返回滿足條件的單個(gè)元素回俐。按照深度優(yōu)先和先序遍歷的原則使用參數(shù)提供的CSS選擇器在DOM進(jìn)行查找,返回第一個(gè)滿足條件的元素诱建。
querySelectorAll
該方法返回所有滿足條件的元素其障,結(jié)果是個(gè)nodeList集合。查找規(guī)則與前面所述一樣涂佃。
<!DOCTYPE html>
<html>
<body>
<h3> h3 元素</h3>
<h2> h2 元素</h2>
<script>
//querySelector會(huì)給所有元素的第一個(gè)元素加上樣式
document.querySelector("h2, h3").style.backgroundColor = "red";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2> h2 元素</h2>
<h3> h3 元素</h3>
<script>
//querySelectorAll獲取所有元素励翼,返回一個(gè)list集合
var o2 = document.querySelectorAll("h2, h3");
for(var i in o2){
o2[i].style.backgroundColor = "red";
}
</script>
</body>
</html>