วิธี getElementsByClassName() ของ HTML DOM Element

คำนิยามและวิธีใช้

getElementsByClassName() วิธีกลับค่าชุดของลูกองค์ประกอบที่มีชื่อคลาสที่กำหนด ในรูปแบบ NodeList ตัวแปร。

ดูเพิ่มเติมที่:

ตัวแปร classList

ตัวแปร className

วิธี querySelector()

วิธี querySelectorAll()

วิธี getElementsByTagName()

HTML DOM Style 对象

วิธีนำเสนอ:

สyntax CSS

เลือกตัวเลือก CSS

คู่มือเลือกตัวเลือก CSS

NodeList

NodeList เป็นชุดของตัวองค์ประกอบที่เหมือนตัวแปร array (รายการ)。

คุณสามารถเข้าถึงตัวองค์ประกอบในรายการด้วยดัชนี (index) ซึ่งเริ่มต้นที่ 0。

ตัวแปร lengthกลับค่าจำนวนของตัวองค์ประกอบในรายการ。

ตัวอย่าง

ตัวอย่าง 1

เปลี่ยนข้อความของรายการแรกด้วย class="child":

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

ลองทดสอบด้วยตัวเอง

ตัวอย่าง 2

จำนวนส่วนที่มี class="child" ใน "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

ลองทดสอบด้วยตัวเอง

ตัวอย่าง 3

เปลี่ยนขนาดของส่วนที่สองของ class="child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

ลองทดสอบด้วยตัวเอง

ตัวอย่าง 4

ใช้คลาส "child" และ "color" ในองค์ประกอบที่สองของ class="example" ที่เพิ่มขนาดขององค์ประกอบแรก:

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

ลองทดสอบด้วยตัวเอง

ตัวอย่าง 5

เปลี่ยนสีของทุกองค์ประกอบที่มี class="child" ใน "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

ลองทดสอบด้วยตัวเอง

การเขียน

element.getElementsByClassName(classname)

ตัวแปร

ตัวแปร รายละเอียด
classname

จำเป็น

แยกชื่อหลายตัวด้วยอักษรหลังเครื่องหมายย่อย (เช่น "child color")

ค่าที่คืนค่า

ประเภท รายละเอียด
NodeList

เป็นลูกขององค์ประกอบที่มีชื่อคลาสที่กำหนด

องค์ประกอบตามลำดับที่ปรากฏในรหัสต้นแบบ

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

element.getElementsByClassName() เป็นคุณสมบัติของ DOM Level 1 (1998)

ทุกเบราเซอร์สนับสนุนมันอย่างเต็มที่:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน 9-11 สนับสนุน สนับสนุน สนับสนุน สนับสนุน