HTML DOM getElementsByClassName() Method

<ธาตุวัตถุ

ตัวอย่าง

เปลี่ยนข้อความของรายการแรกที่มี class = "เด็กที่" (index 0) ในรายการที่มี class = "เช่น" A:

var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

ก่อนที่จะเปลี่ยนข้อความ:

Coffee
Tea

หลังจากเปลี่ยนข้อความ:

Milk
Tea

ลองตัวเอง»

เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง

ความหมายและการใช้งาน

getElementsByClassName() วิธีการส่งกลับคอลเลกชันขององค์ประกอบองค์ประกอบเด็กที่มีชื่อชั้นที่ระบุเป็นวัตถุ NodeList

วัตถุ NodeList หมายถึงคอลเลกชันของโหนด โหนดสามารถเข้าถึงได้โดยตัวเลขดัชนี ดัชนีเริ่มต้นที่ 0

เคล็ดลับ: คุณสามารถใช้ ระยะเวลาใน คุณสมบัติของวัตถุ NodeList เพื่อตรวจสอบจำนวนโหนดเด็กที่มีชื่อชั้นที่ระบุแล้วคุณสามารถห่วงผ่านโหนดทั้งหมดและสารสกัดจากข้อมูลที่คุณต้องการ

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ

วิธี
getElementsByClassName()	4.0	9.0	3.0	3.1	9.5

วากยสัมพันธ์

element .getElementsByClassName( classname )

ค่าพารามิเตอร์

พารามิเตอร์	ชนิด	ลักษณะ
classname	String	จำเป็นต้องใช้ ชื่อชั้นขององค์ประกอบของเด็กที่คุณต้องการที่จะได้รับ เพื่อค้นหาชื่อชั้นหลายแยกพวกเขามีช่องว่างเช่น "child color"

รายละเอียดทางเทคนิค

DOM เวอร์ชัน:	หลักระดับ 1 ธาตุวัตถุ
กลับค่า:	วัตถุ NodeList คิดเป็นคอลเลกชันขององค์ประกอบองค์ประกอบเด็กที่มีชื่อชั้นที่ระบุ องค์ประกอบในการเก็บกลับจะถูกเรียงลำดับตามที่ปรากฏในรหัสที่มา

ตัวอย่างอื่น ๆ

ตัวอย่าง

เปลี่ยนสีพื้นหลังขององค์ประกอบที่สองกับ class = "เด็ก" ภายในของ <div> องค์ประกอบ:

var x = document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";

ลองตัวเอง»

ตัวอย่าง

หาองค์ประกอบหลายวิธีด้วย class = "เด็ก" มีภายในของ <div> องค์ประกอบ (โดยใช้ระยะเวลาในคุณสมบัติของวัตถุ NodeList) ที่:

var x = document.getElementById("myDIV").getElementsByClassName("child").length;

ผลของ x จะเป็น:

ลองตัวเอง»

ตัวอย่าง

เปลี่ยนสีพื้นหลังขององค์ประกอบแรกที่มีทั้ง "child" และ "color" ชั้นภายในขององค์ประกอบที่มี class = "เช่น" ต่อไปนี้:

var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";

ลองตัวเอง»

ตัวอย่าง

เปลี่ยนสีพื้นหลังขององค์ประกอบทั้งหมดที่มี class = "เด็ก" ภายในของ <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";
}

ลองตัวเอง»