เมธอด getElementsByClassName() ใน HTML DOM

เมธอด getElementsByClassName() ใน HTML DOM ใช้สำหรับดึงคอลเลกชันขององค์ประกอบทั้งหมดในเอกสารที่มีชื่อคลาส (class name) ตรงกับที่ระบุ คืนค่าเป็นออบเจ็กต์ NodeList สามารถเข้าถึงองค์ประกอบแต่ละตัวได้ด้วยหมายเลขดัชนี สามารถเรียกใช้เมธอดนี้บนองค์ประกอบใดก็ได้เพื่อค้นหาองค์ประกอบลูกที่มีคลาสตรงกัน

ไวยากรณ์ (Syntax)

document.getElementsByClassName(className)

className เป็นสตริงระบุชื่อคลาสขององค์ประกอบที่ต้องการเข้าถึง สามารถระบุหลายคลาสได้โดยคั่นด้วยช่องว่าง

ตัวอย่าง

ตัวอย่างการเปลี่ยนแปลงย่อหน้าที่มีคลาส "PARA1":

<!DOCTYPE html>
<html>
<head>
<script>
  function changePara() {
    var paragraphs = document.getElementsByClassName("PARA1");
    paragraphs[0].innerHTML = "This text has been changed";
    paragraphs[1].style.color = "red";
    paragraphs[1].style.backgroundColor = "yellow";
  }
</script>
</head>
<body>
<h1>ตัวอย่าง getElementsByClassName()</h1>
<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p class="PARA1">Ut enim ad minim veniam, quis nostrud exercitation...</p>
<button onclick="changePara()">CHANGE</button>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงสองย่อหน้าที่มีคลาส "PARA1" และปุ่ม "CHANGE"

เมื่อคลิกปุ่ม "CHANGE" ย่อหน้าแรกจะเปลี่ยนข้อความ ย่อหน้าที่สองจะมีตัวอักษรสีแดง พื้นหลังสีเหลือง

คำอธิบายโค้ด

• สร้างสองย่อหน้า <p class="PARA1"> มีคลาสเหมือนกัน
• สร้างปุ่ม "CHANGE" เรียกใช้ changePara() เมื่อคลิก
• ฟังก์ชัน changePara() ดึงองค์ประกอบที่มีคลาส "PARA1" ด้วย getElementsByClassName("PARA1") เก็บใน paragraphs
• ใช้ดัชนี [0] และ [1] เข้าถึงแต่ละย่อหน้า แล้วเปลี่ยน innerHTML และสไตล์