HTML DOM getElementsByClassName()เมธอด
❮ วัตถุธาตุตัวอย่าง
เปลี่ยนข้อความของรายการแรกด้วย class="child" (ดัชนี 0) ในรายการที่มี class="example":
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
เมธอด getElementsByClassName() ส่งคืนคอลเล็กชันขององค์ประกอบย่อยขององค์ประกอบที่มีชื่อคลาสที่ระบุ เป็นอ็อบเจ็กต์ NodeList
วัตถุ NodeList แสดงถึงชุดของโหนด โหนดสามารถเข้าถึงได้โดยหมายเลขดัชนี ดัชนีเริ่มต้นที่ 0
เคล็ดลับ:คุณสามารถใช้ คุณสมบัติ lengthของวัตถุ NodeList เพื่อกำหนดจำนวนโหนดย่อยที่มีชื่อคลาสที่ระบุ จากนั้นคุณสามารถวนซ้ำผ่านโหนดทั้งหมดและดึงข้อมูลที่คุณต้องการ
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
| Method | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
ไวยากรณ์
element.getElementsByClassName(classname)
ค่าพารามิเตอร์
| Parameter | Type | Description |
|---|---|---|
| classname | String | Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color". |
รายละเอียดทางเทคนิค
| รุ่น DOM: | วัตถุองค์ประกอบหลักระดับ 1 |
|---|---|
| คืนมูลค่า: | ออบเจ็กต์ NodeList แสดงถึงคอลเล็กชันของอิลิเมนต์ลูกของอิลิเมนต์ที่มีชื่อคลาสที่ระบุ องค์ประกอบในคอลเล็กชันที่ส่งคืนจะถูกจัดเรียงตามที่ปรากฏในซอร์สโค้ด |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เปลี่ยนสีพื้นหลังขององค์ประกอบที่สองด้วย class="child" ภายใน <div> องค์ประกอบ:
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";
ตัวอย่าง
ค้นหาจำนวนองค์ประกอบที่มี class="child" ภายในองค์ประกอบ <div> (โดยใช้คุณสมบัติความยาวของวัตถุ NodeList):
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;
ตัวอย่าง
เปลี่ยนสีพื้นหลังขององค์ประกอบแรกที่มีทั้งคลาส "ลูก" และ "สี" ภายในองค์ประกอบด้วย class="example":
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";
ตัวอย่าง
เปลี่ยนสีพื้นหลังขององค์ประกอบทั้งหมดที่มี class="child" ภายใน <div> องค์ประกอบ:
var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
หน้าที่เกี่ยวข้อง
บทช่วยสอน CSS: ไวยากรณ์ CSS
การอ้างอิง CSS: CSS .class Selector
อ้างอิง HTML DOM: document.getElementsByClassName()
การอ้างอิง HTML DOM: className Property
การอ้างอิง HTML DOM: คุณสมบัติ classList
การอ้างอิง HTML DOM: HTML DOM Style Object
❮ วัตถุธาตุ