- JavaScript 選擇 DOM 元素的方法有以下幾種 :
- getElementById : 返回指定元素 id 的屬性。
- getElementByClassName : 返回所有指定類名的元素。
- getElementsByName : 返回所有指定 name 屬性的元素。
- getElementsByTagName : 返回所有指定標籤的元素。
- querySelector : 返回第一個符合要求的元素,類似 JQuery 選擇器 (ex : document.querySelector(“#demo”))。
- querySelectorAll : 返回所有符合要求的元素。
ID 選擇器 :
1
2document.getElementById("id_name");
document.querySelector("#id_name");class 選擇器 :
1
2document.getElementByClassName("class_name");
document.querySelectorAll(".class_name");標籤元素選擇器 :
1
2document.getElementsByTagName("a"); //獲得所有的 <a> 元素
document.querySelectorAll("a");屬性選擇器 :
1
2document.querySelectorAll("select[name='Type']"); //選取所有 name 屬性為 Type 的 <select> 元素
document.querySelectorAll("div[data-type]"); //獲得所有帶自定義屬性 data-type 的 <div> 元素註 : 可用於自定義屬性,需要用 [ ] 號,包含屬性名。
組別選擇器 :
1
2document.querySelectorAll("div,a"); //獲得所有 <div> 和 <a> 元素
document.querySelectorAll(".btn,.text"); //獲得 class 為 "btn" 或 "text" 的所有元素註 : 以 , 號隔開,同時獲得多個型別的元素。
子元素選擇器 1 :
1
2document.querySelectorAll("div a"); // <div> 元素的所有子元素 <a>
document.querySelectorAll(".type_ul input[type='checkbox']:checked"); //獲得 class 為 type_ul 的子元素 <input> 中 type 為 checkbox 且被選中的元素註 : 以空格分隔,從父元素從左往右寫。
子元素選擇器 2 :
1
document.querySelectorAll("#cusTable>tbody>tr"); // id 為 cusTable 的元素的所有 <tbody> 元素的子元素的所有 <tr> 元素
註 : 如果子元素選擇器想進一步縮小範圍,可以使用 > 號選擇某個元素的一級子元素。
兄弟選擇器 :
1
document.querySelectorAll("div+p"); //每個 <div> 元素相鄰的下一個 <p> 元素
註 : 選擇緊接在一個元素後的另一個元素,兩者有相同的父元素,用 + 號表示。