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>