JavaScript選擇DOM元素的方法

• getElementById：根據指定元素的id屬性返回元素
• getElementByClassName：返回所有指定類名的元素
• getElementsByName：返回所有指定name屬性的元素
• getElementsByTagName：返回所有指定標籤的元素
• querySelector：根據選擇器規則返回第一個符合要求的元素
• querySelectorAll：根據選擇器規則返回所有符合要求的元素

1. ID選擇器

通過HTML元素的id屬性選取指定的元素

document.getElementById
 
("id_name");
document.querySelector("#id_name");

2. class選擇器

通過指定的 class 查詢元素

document.getElementByClassName("class_name");
document.querySelectorAll(".class_name");

3. 元素選擇器

基於元素名選取元素，如果有多個，需要用到遍歷，直接寫元素名

document.getElementsByTagName("a");//獲取所有的<a>元素
document.querySelectorAll("a"
 
);

4. 屬性選擇器

通過屬性選取元素，可用於自定義屬性，需要寫 [] 號，包含屬性名

document.querySelectorAll("select[name='Type']");//選取所有name屬性為Type的<select>元素
document.querySelectorAll("div[data-type]");//獲取所有帶自定義屬性data-type的<div>元素
document.querySelectorAll("div[data-type="+type+"]");//獲取所有自定義屬性data-type為變數type的<div>元素
 

5. 分組選擇器

以 , 號隔開，同時獲取多個型別的元素

document.querySelectorAll("div,a");//獲取所有<div>和<a>元素
document.querySelectorAll(".btn,.text")//獲取class為"btn"或"text"的所有元素

6. 後代選擇器

以空格分隔，從父類元素從左往右寫

document.querySelectorAll("div a");//<div>元素的後代的所有<a>元素
document.querySelectorAll(".type_ul input[type='checkbox']:checked")//獲取class為type_ul的子元素<input>中type為checkbox且被選中的元素

7. 子元素選擇器

後代選擇器會將元素底下的所有相關元素都搜尋出來，如果想進一步縮小範圍，可以使用子元素選擇器，只會選擇某個元素的一級子元素，子元素用 > 號表示

document.querySelectorAll("#cusTable>tbody>tr");//id為cusTable的元素的所有<tbody>元素的直接子元素的所有<tr>元素

8. 兄弟選擇器

選擇緊接在一個元素後的另一個元素，兩者有相同的父元素，用 + 號表示

document.querySelectorAll("div+p");//每個<div>元素相鄰的下一個<p>元素

9. 偽類選擇器