home

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

HTML DOM getElementsByTagName() เมธอด

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

HTMLcollection ที่ส่งคืนยังคงซิงค์กับแผนผัง DOM โดยไม่ต้องเรียกเมธอด getElementsByTagName() ซ้ำแล้วซ้ำเล่าหลังจากลบหรือเพิ่มองค์ประกอบบางอย่าง

ไวยากรณ์

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

element.getElementsByTagName(tagname)

ที่นี่ tagname เป็นค่าพารามิเตอร์บังคับที่ระบุชื่อ tagname องค์ประกอบลูกที่เราต้องการได้รับ

ตัวอย่าง

ให้เราดูตัวอย่างสำหรับเมธอด getElementsByTagName() -

<!DOCTYPE html>
<html>
<head>
<script>
   function changePara() {
      var p = document.getElementsByTagName("P");
      p[0].innerHTML = "This text has been changed";
      p[1].style.color = "red";
      p[1].style.backgroundColor = "yellow";
   }
</script>
</head>
<body>
<h1>getElementsByTagName() example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p>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 getElementsByTagName() เมธอด

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

HTML DOM getElementsByTagName() เมธอด

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

เราได้สร้างย่อหน้าสองย่อหน้าที่ไม่มีคุณลักษณะที่เกี่ยวข้องกัน -

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

<p>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 โดยใช้เมธอด getElementsByTagName() บนวัตถุเอกสารและกำหนดให้กับตัวแปร 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";
}