method getElementsByClassName() ของ HTML DOM Document

definisi และจุดใช้งาน

getElementsByClassName() method ส่งกลับชุดขององค์ประกอบที่มีชื่อคลาสที่กำหนด

getElementsByClassName() method ส่งกลับ HTMLCollection

getElementsByClassName() property คือเรียกดูเฉพาะ

HTMLCollection

HTMLCollection เป็นชุดของ HTML องค์ประกอบที่เหมือนตัวแปลเรียงลำดับ (ลิสต์)

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

length property ส่งกลับจำนวนขององค์ประกอบในชุด

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

method getElementById()

method getElementsByTagName()

method querySelector()

method querySelectorAll()

Object HTMLCollection

ตัวอย่าง

ตัวอย่าง 1

ของที่มี class="example"

const collection = document.getElementsByClassName("example");

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

ตัวอย่าง 2

ของที่ได้รับทั้ง "example" และ "color" ตัวคลาสทั้งหมด

const collection = document.getElementsByClassName("example color");

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

ตัวอย่าง 3

จำนวนองค์ประกอบที่มี class="example":

let numb = document.getElementsByClassName("example").length;

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

ตัวอย่าง 4

เปลี่ยนสีพื้นหลังของทุกองค์ประกอบที่มี class="example":

const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

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

สายงาน

document.getElementsByClassName("classname)

ตัวแปร

ตัวแปร เรื่องราว
classname

สำหรับใช้

ค้นหาชื่อชั้นหลายชื่อที่แยกด้วย пробел, ตัวอย่าง "test demo"

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

ประเภท เรื่องราว
อ็อบเจกท์

อ็อบเจกท์ HTMLCollection

ชุดขององค์ประกอบที่มีชื่อชั้นเฉพาะ

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

การสนับสนุนโปรแกรมบราวเซอร์

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

ทุกบราวเซอร์ทุกตัวสนับสนุนมัน:

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

หน้าที่เกี่ยวข้อง

คู่มือเรียน CSS:CSS ระบบ

คู่มือเรียกของ CSS:เลือก .class ใน CSS

คู่มือเรียกของ HTML DOM:element.getElementsByClassName()

คู่มือเรียกของ HTML DOM:ตัวแปร className

คู่มือเรียกของ HTML DOM:ตัวแปร classList

คู่มือเรียกของ HTML DOM:อ็อบเจกท์ Style