ตัวอย่าง
รับองค์ประกอบทั้งหมดที่มีชื่อชั้นที่ระบุ:
var x =
document.getElementsByClassName("example");
ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
getElementsByClassName() วิธีการส่งกลับคอลเลกชันขององค์ประกอบทั้งหมดในเอกสารที่มีชื่อชั้นที่ระบุเป็นวัตถุ NodeList
วัตถุ NodeList หมายถึงคอลเลกชันของโหนด โหนดสามารถเข้าถึงได้โดยตัวเลขดัชนี ดัชนีเริ่มต้นที่ 0
เคล็ดลับ: คุณสามารถใช้ ระยะเวลาใน คุณสมบัติของวัตถุ NodeList เพื่อตรวจสอบจำนวนขององค์ประกอบที่มีชื่อชั้นที่ระบุแล้วคุณสามารถห่วงผ่านองค์ประกอบทั้งหมดและสารสกัดจากข้อมูลที่คุณต้องการ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
วากยสัมพันธ์
document.getElementsByClassName( classname )ค่าพารามิเตอร์
| พารามิเตอร์ | ชนิด | ลักษณะ |
|---|---|---|
| classname | String | จำเป็นต้องใช้ ชื่อชั้นขององค์ประกอบที่คุณต้องการที่จะได้รับ เพื่อค้นหาชื่อชั้นหลายแยกพวกเขามีช่องว่างเช่น "test demo" |
รายละเอียดทางเทคนิค
| DOM เวอร์ชัน: | ระดับแกนวัตถุ 1 เอกสาร |
|---|---|
| กลับค่า: | วัตถุ NodeList คิดเป็นคอลเลกชันขององค์ประกอบที่มีชื่อชั้นที่ระบุ องค์ประกอบในการเก็บกลับจะถูกเรียงลำดับตามที่ปรากฏในรหัสที่มา |
ตัวอย่างอื่น ๆ
ตัวอย่าง
รับองค์ประกอบทั้งหมดที่มีทั้ง "example" และ "color" ชั้นเรียน:
var x =
document.getElementsByClassName("example color"); ลองตัวเอง» ตัวอย่าง
หาองค์ประกอบหลายวิธีด้วย class = "ตัวอย่าง" ที่มีอยู่ในเอกสาร (ใช้ระยะเวลาในคุณสมบัติของวัตถุ NodeList) ที่:
var x =
document.getElementsByClassName("example").length; ลองตัวเอง» ตัวอย่าง
เปลี่ยนสีพื้นหลังขององค์ประกอบทั้งหมดที่มี class = "ตัวอย่าง":
var x = document.getElementsByClassName("example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
สอน CSS: CSS Selectors
CSS อ้างอิง: CSS .class เลือก
HTML DOM อ้างอิง: องค์ประกอบ getElementsByClassName()
HTML DOM อ้างอิง: className Property
HTML DOM อ้างอิง: classList Property
HTML DOM อ้างอิง: รูปแบบวัตถุ