home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

HTML DOM getElementsByClassName() เมธอด

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

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับเมธอด getElementsByClassName() -

document.getElementsByClassName(classname)

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

ตัวอย่าง

ให้เราดูตัวอย่างของเมธอด getElementsByClassName() -

<!DOCTYPE html>
<html>
<head>
<script>
   function changePara() {
      var p = document.getElementsByClassName("PARA1");
      p[0].innerHTML = "This text has been changed";
      p[1].style.color = "red";
      p[1].style.backgroundColor = "yellow";
   }
</script>
</head>
<body>
<h1>getElementsByClassName() example</h1>
<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p class="PARA1"> Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<button onclick="changePara()">CHANGE</button>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM getElementsByClassName() เมธอด

เมื่อคลิกปุ่ม CHANGE -

HTML DOM getElementsByClassName() เมธอด

ในตัวอย่างข้างต้น −

เราได้สร้างย่อหน้าสองย่อหน้าที่มี classname=”PARA1” เชื่อมโยงอยู่

<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

<p class="PARA1"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

จากนั้นเราได้สร้างปุ่ม CHANGE ที่จะรัน changePara() เมื่อผู้ใช้คลิก -

<button onclick="changePara()">CHANGE</button>

เมธอด changePara() รับทั้งองค์ประกอบ

เป็น nodeListObject โดยใช้เมธอด getElementsByClassName() บนวัตถุเอกสารและกำหนดให้กับตัวแปร p เราใช้ตัวเลขดัชนีเพื่อเปลี่ยนข้อความในย่อหน้าแรกและใช้รูปแบบบางอย่างกับย่อหน้าที่สอง -

function changePara() {
   var p = document.getElementsByClassName("PARA1");
   p[0].innerHTML = "This text has been changed";
   p[1].style.color = "red";
   p[1].style.backgroundColor = "yellow";
}