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