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

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

JavaScript有哪些選擇器

JavaScript選擇器常用的有g(shù)etElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()。

1、document.querySelector()

querySelector() 方法僅僅返回匹配指定選擇器的第一個(gè)元素。如果你需要返回所有的元素，請(qǐng)使用 querySelectorAll() 方法替代

（1）獲取文檔中 id=“demo” 的元素：

document.querySelector("#demo");

（2）獲取文檔中第一個(gè)p的元素

document.querySelector(“p”);

（3）獲取文檔中 class=“example” 的第一個(gè)元素

document.querySelector(".example");

（4）獲取文檔中 class=“example” 的第一個(gè) p 元素:

document.querySelector(“p.example”);

（5）獲取文檔中有 “target” 屬性的第一個(gè) a 元素：

document.querySelector(“a[target]”);

（6）多選擇器時(shí)

document.querySelectorAll(’.ynqc’)

2、document.getElementById()

這個(gè)方法將返回一個(gè)與之對(duì)應(yīng)id屬性的節(jié)點(diǎn)對(duì)象，它是document對(duì)象特有的函數(shù)，只能通過(guò)其來(lái)調(diào)用該方法，使用方法下:document.getElementById(‘idName’);

3、getElementsByTagName()

這個(gè)方法返回一個(gè)對(duì)象數(shù)組（準(zhǔn)確的說(shuō)是htmlCollection集合）,返回元素的順序是它們?cè)谖臋n中的順序,傳遞給 getElementsByTagName() 方法的字符串可以不區(qū)分大小寫,使用方法如下:document.getElementsByTagName(tagName);

4、getElementsByClassName()

這個(gè)方法來(lái)獲取指定class名的元素,該方法返回文檔中所有指定類名的元素集合，作為 NodeList 對(duì)象。NodeList 對(duì)象代表一個(gè)有順序的節(jié)點(diǎn)列表。NodeList 對(duì)象 我們可通過(guò)節(jié)點(diǎn)列表中的節(jié)點(diǎn)索引號(hào)來(lái)訪問(wèn)列表中的節(jié)點(diǎn)(索引號(hào)由0開(kāi)始), 所以有時(shí)使用時(shí)要指定下標(biāo)，使用方法如下:document.getElementsByClassName(‘className’);

5、document.getElementsByName()

getElementsByName() 方法可返回帶有指定名稱的對(duì)象的集合。

該方法與 getElementById() 方法相似，但是它查詢?cè)氐?name 屬性，而不是 id 屬性。

另外，因?yàn)橐粋€(gè)文檔中的 name 屬性可能不唯一（如 HTML 表單中的單選按鈕通常具有相同的 name 屬性），所有 getElementsByName() 方法返回的是元素的數(shù)組，而不是一個(gè)元素。

6、document.querySelectorAll()

querySelectorAll() 方法返回文檔中匹配指定 CSS 選擇器的所有元素，返回 NodeList 對(duì)象。

NodeList 對(duì)象表示節(jié)點(diǎn)的集合。可以通過(guò)索引訪問(wèn)，索引值從 0 開(kāi)始。

提示: 你可以使用 NodeList 對(duì)象的 length 屬性來(lái)獲取匹配選擇器的元素屬性，然后你可以遍歷所有元素，從而獲取你想要的信息。

【推薦學(xué)習(xí)：javascript高級(jí)教程】