在传统的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