js選擇器
（1）getElementById()
任何HTML元素可以有一個id屬性，在文件中該值必須唯一
若瀏覽器中出現多個id名的情況，CSS樣式對所有該id名的元素都生效，但javascript指令碼僅對第一個出現該id名的元素生效。
getElementById()該方法接收一個引數：要取得元素的id，若找到則返回該元素，若不存在則返回null
注意：document.getElementById方法的內部實現需要用到this，這個this本來被期望指向document
【跨瀏覽器相容】1：在ie7中，使用getElementById()的時候，接收的引數id不區分大小寫。
2：在表單元素中，如果表單設定有name屬性，其name屬性會被當做id識別出來。
3: id是唯一的，但name屬性並不是唯一的。具有該名稱的隱式全域性變數會引用一個類陣列物件，包括所有該命名的元素.
<a href="#" name="test">a元素1</a> <a href="#" name="test">a元素2</a> <div id="test">div元素</div> <script> //IE瀏覽器中，兩個a元素和一個div元素字型都變成紅色 for(var i = 0; i < test.length; i++){ test[i].style.color = 'red'; } </script>//在ie瀏覽器中，兩個a連結和下方的div都會顯示紅色字型。
（2）
getElementsByTagName（返回值是一個nodeList集合（區別於Array），可作用於Dom元素）getElementsByTagName()方法接收一個引數，即要取得元素的標籤名，而返回的是包含0或多個元素的類陣列物件HTMLCollection。可以使用方括號語法或item()方法來訪問類陣列物件中的項，length屬性表示物件中元素的數量。
<div name="11">第一</div> <div name="11">第二</div> <span>第三span</span> <script> var aa = document.getElementsByTagName("div"); console.log(aa[1].innerHTML+aa.item(0).innerHTML)//結果為:第二第一 console.log(aa.namedItem("11"))//結果為：<div name="11">第一</div> </script>
[注意]通過getElementsByTagName()方法取得的類陣列物件有一個namedItem()方法，可以通過元素的name屬性取得集合中的第一個值。safari和IE不支援該方法。document.getElementsByTagName（"*"）表示匹配文件的所有元素（3）getElementsByName（返回值是一個nodeList集合（區別於Array），可作用於Dom元素）
getElementsByName()方法接收一個引數，即要取得元素的name值。
document.getElementsByName("Name");Name為要獲取元素的name屬性值,這個方法一般適用於提交表單資料,當元素為form、img、iframe、applet、embed、object的時候設定name屬性時,會自動在Document物件中建立以該name屬性值命名的屬性。所以可以通過document.domName引用相應的dom物件。
【注意】（1）在ie9中，getElementsByName()只對表單元素起作用。
（2）IE9-瀏覽器中使用getElementsByName()方法也會返回id屬性匹配的元素。因此，不要將name和id屬性設定為相同的值。
（4）document.getElementsByClassName（返回值是一個nodeList集合（區別於Array），可作用於Dom元素）
document.getElementsByClassName通過獲取“類名”來獲取元素。document.getElementsByClass（"class1 class2"）可以拿到同時擁有class1和class2的元素，中間用空格隔開，不區分class1和class2的順序。
相容性：IE8及其以下版本的瀏覽器未實現getElementsByClassName方法
（5）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>