在HTML5出現之前使用JavaScript查找DOM元素，有以下三種原生的方法：
- getElementById：根據指定元素的id屬性返回元素
- getElementsByName：返回所有指定name屬性的元素
- getElementsByTagName：返回所有指定標簽的元素
HTML5新增的選擇器，方法有兩種：
- querySelector：根據選擇器規則返回第一個符合要求的元素
- querySelectorAll：根據選擇器規則返回所有符合要求的元素
支持新的HTML5 JavaScript選擇器接口的瀏覽器有：IE 8+、FireFox 3.5+、Safari 3.2+、Chrome 4.0+、Oprea 10.1+ 。
一、選擇器的分類
1. ID選擇器
使用ID選擇器時，需在前面添加“#”，區分大小寫，語法如下：
document.querySelector('#id'); //等同於document.getElementById('id');
2. 元素選擇器
元素選擇器通過指定的標簽查詢元素，此時querySelectorAll等同於getElementsByTagName，語法如下：
document.querySelectorAll('a'); //獲取頁面上的所有a元素並返回元素
3. 樣式類選擇器
使用元素的樣式類獲取一個或一類元素，樣式名字前使用“.”（英文句號）開頭，語法如下：
document.querySelectorAll('.btn'); //獲取所有樣式類中包含btn類名的元素
4. 分組選擇器
使用querySelectorAll不僅可以獲取一個或一類元素，還可以同時獲取其他類別元素，兩種類型之間使用逗號隔開，語法如下：
document.querySelectorAll('a,p'); //獲取頁面上所有a元素和p元素，並通過一個列表返回
document.querySelectorAll('.btn,.txt'); //獲取頁面上所有包含btn和txt樣式類名的元素
5. 屬性選擇器
獲取頁面上包含指定屬性的元素，屬性名稱可以是元素原生屬性和用戶自定義屬性，語法如下：
document.querySelectorAll('a[target="_blank"]'); //獲取頁面上所有target屬性為_blank的a元素
document.querySelectorAll('img[data-id]'); //獲取頁面上所有帶有自定義屬性data-id的img元素
6. 后代選擇器
主要用於選擇作為某元素后代的元素，規則左邊的選擇器一端包含兩個或多個用空格分隔的選擇器，如div a可以理解為查找所有被div包圍的所有a元素，語法如下：
document.querySelectorAll('div a'); //獲取頁面上所有被div包含的a元素
document.querySelectorAll('div .btn'); //獲取頁面上所有被div包含的帶有btn樣式類名的元素
7. 子元素選擇器
后代選擇器會將元素底下的所有相關元素都搜索出來，如果想進一步縮小范圍，可以使用子元素選擇器，只會選擇某個元素的一級子元素，子元素用“>”（大於號）表示，代碼如下：
<html> <div id="first"> <div></div> <div></div> </div> </html> <script> document.querySelectorAll('html>div'); //只返回一個id為first的div元素 </script>
8. 相鄰兄弟選擇器（比較少用）
選擇緊接在另一個元素后的元素，而且兩者有相同的父元素，相鄰兄弟選擇器使用“+”（加號），代碼如下：
<div> <div></div> <div></div> </div> <p id="p1"></p> <p id="p2"></p> <script> document.querySelectorAll('div+p'); //只返回一個id為p1的p元素 </script>
9. 偽類選擇器
“:first-child”表示選擇元素的第一個子元素，“:last-child”表示選擇元素的最后一個子元素，“:nth-child(n)”表示選擇元素的第n個子元素。“:first-child”的使用例子，代碼如下：
<div> <p id="p1"></p> <p id="p2"></p> </div> <script> document.querySelectorAll('p:first-child'); //只返回一個id為p1的p元素 </script>
除了上述九種常用的選擇方法外，還有很多其他更高級的選擇器使用方法。
更多的選擇器方法可參考jQuery的文檔：地址是：http://api.jquery.com/category/selectors/。
原創文章，轉載請注明出處：http://www.cnblogs.com/iyitong/p/4229355.html