CSS选择器比较：queryselector queryselectorall

　官网解释：

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 +'\n'+ 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:

var elementList = document.querySelectorAll('selectors');

例如：创建一个li标签名称为“sites"的数组，在id为“idata”的元素里面带有”note"标签

Example, creates an Array with the content of LI tags with class="sites", and the tags with class="note" within element with id="idata":

<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>
执行结果：