前言：HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法来更方便地从DOM选取元素，功能类似于jQuery地选择器
document.querySelector():通过类似css选择器获取元素，符合匹配条件的第一个元素。
语法：
1 element = document.querySelector(selectors);
其中
- element是一个element对象（dom元素）
- selectors是一个字符串，包含一个或是多个css选择器，多个则以逗号分隔。
例子1-1
这个例子中，会返回当前文档中第一个类名"myclass"的元素：
1 var el = document.querySelector(".myclass");
例子1-2
还可以传入复合选择器匹配。例子将返回<div class="user-panel main">标签中的<input name="login"/>标签
1 <div class="user-panel main"> 2 <input name="login"/> //这个标签将被返回 3 </div> 4 5 <script> 6 var el = document.querySelector("div.user-panel.main input[name=login]"); 7 </script>
Doucment.querySelectorAll()：通过css选择器获取元素，以类数组形式存在。返回的对象类型是NodeList.
语法
1 elementList = document.querySelectorAll(selectors);
- elementsList 是一个non-live的NodeList类型的对象
- selector是一个由逗号链接的包含一个或多个css选择器的字符串。
ps：如果selectors参数中包含css伪类，则返回一个空的elementList.
例子
下面的例子返回一个文档中所有的class为"note"或者"alert"的div元素
1 var matches = document.querySelectorAll("div.note,div.alert");
ps:
- 如果指定的选择器不和法，则抛出一个SYNTAX_ERR异常。
- querySelectorAll()从webApps API 中引入
- WebKit 内核的浏览器有一个bug: 如果
selectors参数中包含CSS伪类 ,返回的elementList包含一个<html>元素,而不是空的.
浏览器兼容问题
目前各个主流浏览器对此API提供了良好的支持，IE需8+。