H5选择符api

前言：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+。