官网解释：
querySelector() and querySelectorAll() are two JavaScript functions very useful when working with HTML elements and JavaScript.
With these functions you can get in JavaScript the HTML elements according to a group of CSS selectors ("id", "class").
They are supported by: Mozilla Firefox 3.5+, Google Chrome, Internet Explorer 8+, Opera 10+, Safari 3.2+.
即：
querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。
querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。
并且返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。
目前IE8+，ff，chrome都支持此api（IE8中的selector string只支持css2.1的）。
一：querySelector() ：
returns the first element within the document that matches the specified group of selectors, or null if no matches are found.
querySelector用于获得dom节点，可以接受三种类型的参数：id(#)，class(.)，标签。很像jquery的选择器所有的选择器，不过只能返回一个子孙元素。
var elm = document.querySelector('selectors');
下面看一个实例：
<div id="someid">Have a Good life.</div> <ul> <li class="aclass">CoursesWeb.net</li> <li>MarPlo.net</li> <li class="aclass">php.net</li> </ul> <script type="text/javascript"> var someid_cnt = document.querySelector('#someid').innerHTML; var aclass1_cnt = document.querySelector('li.aclass').innerHTML; alert(someid_cnt +' '+ aclass1_cnt); </script>
结果是：
联想jQuery选择器里面的：jQuery :first 选择器
定义和用法
:first 选择器选取第一个元素。
最常见的用法：与其他元素一起使用，选取指定组合中的第一个元素（就像下面的例子）。
实例：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:first").css("background-color","#B2E0FF"); }); </script> </head> <body> <html> <body> <h1>Welcome to My Homepage</h1> <p class="intro">My name is Donald</p> <p>I live in Duckburg</p> <p>My best friend is Mickey</p> <div id="choose"> Who is your favourite: <ul> <li>Goofy</li> <li>Mickey</li> <li>Pluto</li> </ul> </div> </body> </html> </body> </html>
结果是：很显然，js只对第一个p标签起了作用。
是：
二：querySelectorAll()
querySelectorAll() returns a list of the elements that match the specified group of selectors. The object returned is a NodeList.
If the "selectors" string contains a CSS pseudo-element, the returned elementList will be empty (WebKit browsers have a bug: when the selectors string contains a CSS pseudo-element, the returned elementList contains the <html>).
Syntax:
<ul> <li class="sites">CoursesWeb.net</li> <li class="sites">MarPlo.net</li> <li>php.net</li> </ul> <div id="idata"> <span class="note">Web Development Courses</span> <span class="note">querySelector and querySelectorAll</span> </div> <script type="text/javascript"> // gets all the LI tags with class="sites", and the tags with class="note" in element with id="idata" var elm_list = document.querySelectorAll('li.sites, #idata .note'); var nr_elm = elm_list.length; // number of elements in elm_list var arr_cnt = []; // array to contain data from elm_list // traverse the elm_list object, and add in arr_cnt the content of each element for(var i=0; i<nr_elm; i++) { arr_cnt.push(elm_list[i].innerHTML); } // test, shows data stored in arr_cnt alert(arr_cnt); </script>
执行结果：
