首頁 > web前端 > 前端問答 > JavaScript有哪些選擇器

JavaScript有哪些選擇器

青灯夜游
發布: 2021-10-20 15:13:31
原創
4013 人瀏覽過

JavaScript選擇器有:getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()等等。

JavaScript有哪些選擇器

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript有哪些選擇器

JavaScript選擇器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName() 、querySelector()、querySelectorAll()。

1、document.querySelector()

querySelector() 方法只會傳回符合指定選擇器的第一個元素。如果你需要回傳所有的元素,請使用querySelectorAll() 方法取代

(1)取得文件中 id=「demo」的元素:

document.querySelector("#demo");
登入後複製

(2)取得文件中第一個p的元素

document.querySelector(“p”);
登入後複製

(3)取得文件中class=「example」的第一個元素

document.querySelector(".example");
登入後複製

(4)取得文件中class=「example」的第一個p元素:

document.querySelector(“p.example”);
登入後複製

(5)取得文件中有「target」 屬性的第一個a 元素:

document.querySelector(“a[target]”);
登入後複製

(6)多重選擇器時

document.querySelectorAll(’.ynqc’)
登入後複製

#2、document.getElementById()

這個方法將傳回一個與之對應id屬性的節點對象,它是document物件特有的函數,只能透過其來呼叫該方法,使用方法下:document.getElementById('idName');

3、getElementsByTagName()

這個方法傳回一個物件陣列(準確的說是htmlCollection集合),返回元素的順序是它們在文檔中的順序,傳遞給getElementsByTagName() 方法的字串可以不區分大小寫,使用方法如下:document.getElementsByTagName(tagName);

#4、getElementsByClassName( )

這個方法來取得指定class名稱的元素,此方法傳回文件中所有指定類別名稱的元素集合,作為NodeList 物件。 NodeList 物件代表一個有順序的節點列表。 NodeList 物件我們可以透過節點清單中的節點索引號碼來存取清單中的節點(索引號碼由0開始), 所以有時使用時要指定下標,使用方法如下:document.getElementsByClassName('className');

5、document.getElementsByName()

getElementsByName() 方法可傳回指定名稱的物件的集合。

該方法與 getElementById() 方法相似,但它查詢元素的 name 屬性,而不是 id 屬性。

另外,因為一個文件中的name 屬性可能不唯一(如HTML 表單中的單選按鈕通常具有相同的name 屬性),所有getElementsByName() 方法傳回的是元素的數組,而不是一個元素。

6、document.querySelectorAll()

querySelectorAll() 方法傳回文件中符合指定 CSS 選擇器的所有元素,傳回 NodeList 物件。

NodeList 物件表示節點的集合。可以透過索引訪問,索引值從 0 開始。

提示: 你可以使用 NodeList 物件的 length 屬性來取得符合選擇器的元素屬性,然後你可以遍歷所有元素,從而取得你想要的資訊。

【推薦學習:javascript高階教學

#

以上是JavaScript有哪些選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板