JavaScript的選擇器是什么

這篇文章主要講解了“JavaScript的選擇器是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript的選擇器是什么”吧！

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

本教程操作環境：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的選擇器是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！