querySelector和querySelectorAll
在传统的Javascript开发中,原生的javascript提供了三种查找DOM元素的方法,分别是:
document.getElementsByTagName(); document.getElementById(); document.getElementsByClassName(); document.getElementsByName();
事实上,现在所有的浏览器厂商都提供了querySelector和querySelectorAll这两个原生方法(IE6、IE7不支持)来实现对DOM元素的查找。
使用方法与以前的类似:
//查找id为test的DOM元素
document.querySelector("#test");
document.querySelectorAll("#test")[0];
由上例可以看出:
document.querySelector返回第一个匹配到的元素;如果没有匹配的元素,则返回null。
document。querySelectorAll返回的是一个包含所有匹配到的元素的数组;如果没有匹配的元素,则返回一个空的数组。
当然,也适用后代元素:
<button class="clickBoxs">按钮1</button>
<button class="clickBoxs">按钮2</button>
<button class="clickBoxs"><span>按钮3</span></button>
var span = document.querySelectorAll(".clickBoxs span");
console.log(span.length);//1
var span = document.querySelector(".clickBoxs span");
console.log(span.innerHTML);//按钮3