js選擇器class

⑴ js獲取id號和class類名的區別

原生JS通過id和class獲取元素是用，document.getElementById(IDname),document.getElementsByClassName('ClassName');

1. 兼容性：ID兼容，class 不兼容IE6,7,8

2. 數量： 通過ID只能獲取內一容個dom元素，通過class可以獲取一組元素。

3. 通用性：ID不能重復，class可以重復，所以class比較好用，這也是jQuery能被廣泛應該的原因（選擇器好）。
   

⑵ js怎麼給指定id下面的所有子div添加class

其實只需要用到document.querySelector('選擇器')和結合classList. add("類名"）即可。
那橋孝梁么你這里就只要設置以下兩敏運步代碼即可:
document.querySelector('# room＞div'). classList. add(" test"）;
document.querySelector('慎者# room＞div＞input'). classList. add(" test2"）;

⑶ js獲取類選擇器(js獲取類元素)

JavaScript選擇器介紹：

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、選擇器的優缺點

（1）querySelector是按css規范來實現的，所以它叢芹傳入的字元串中第一個爛鄭埋字元不能是數字.

（2）querySelector()方法返回匹配指定CSS選擇器元素的第一個子元素。該方法只返回匹配指定選擇器的第一個元素。如果要返回所有匹配元素，需要使用querySelectorAll()方法替代．

（3）query選擇符選出來的元素及元素數組是靜態的，而getElement這種方法選出的元素是動態的。靜態的就是說選出的所有元素的數組，不會隨著文檔操作而改變．

Document

Document介面表示在瀏覽器中載入的任何網頁，並作為到網頁內容的入口點，這是?DOM樹。DOM樹包括諸如body和沒笑table之類的元素，其他等等。其也為文檔（document）提供了全局性的函數，例如獲取頁面的URL、在文檔中創建新的element?的函數。它為文檔提供全局的函數，像如何獲取頁面的URL和在文檔中創建新的元枯拍含素。

這里主要用於Document的兩個方法

1、?document.getElementById

返回一個匹配特定?ID的元素??????

script

??賀培function?changeColor(newColor)?{

????var?elem?=?document.getElementById("para1");

????elem.style.color?=?newColor;

??}

??/script

/head

body

??p?id="para1"Some?text?here/p

/body

新手注意：

新手要注意方法名中'Id'的拼寫——'getElementByID'是沒有作用的。許多人會忽視這個錯誤。

如果沒有查找到對應的元素，方法會返回null。注意ID參數是大小寫敏感的，所以document.getElementById("Main")無法獲取到元素divid="main"，因為'M'和'm'是不一樣的。

2、Document.getElementsByClassName()

返回一個類似數組的對象，包含了所有指定class名稱的子元素。

document.getElementsByClassName('test');?//獲取所有class為'test'的元素

document.getElementsByClassName('red?test');?//獲取所有class同時包括'red'和'test'的元素