เมธอด getElementsByTagName() ใน HTML DOM ใช้สำหรับดึงคอลเลกชันขององค์ประกอบทั้งหมดในเอกสารที่มีชื่อแท็ก (tag name) ตรงกับที่ระบุ คืนค่าเป็นออบเจ็กต์ NodeList สามารถเข้าถึงองค์ประกอบแต่ละตัวได้ด้วยหมายเลขดัชนี (index)
HTMLCollection ที่คืนค่าจะซิงโครไนซ์กับ DOM tree อัตโนมัติ ไม่ต้องเรียกเมธอดซ้ำหลังจากเพิ่มหรือลบองค์ประกอบ
ไวยากรณ์ (Syntax)
element.getElementsByTagName(tagName)tagName (บังคับ) ระบุชื่อแท็กขององค์ประกอบลูกที่ต้องการดึง
ตัวอย่าง
ตัวอย่างการเปลี่ยนแปลงเนื้อหาและสไตล์ของย่อหน้า (p) ทั้งหมด:
<!DOCTYPE html>
<html>
<head>
<script>
function changePara() {
var paragraphs = document.getElementsByTagName("P");
paragraphs[0].innerHTML = "This text has been changed";
paragraphs[1].style.color = "red";
paragraphs[1].style.backgroundColor = "yellow";
}
</script>
</head>
<body>
<h1>ตัวอย่าง getElementsByTagName()</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation...</p>
<button onclick="changePara()">CHANGE</button>
</body>
</html>ผลลัพธ์
เมื่อโหลดหน้าเว็บจะแสดงสองย่อหน้าและปุ่ม "CHANGE"
เมื่อคลิกปุ่ม "CHANGE" ย่อหน้าแรกจะเปลี่ยนข้อความเป็น "This text has been changed" ย่อหน้าที่สองจะมีตัวอักษรสีแดง พื้นหลังสีเหลือง
คำอธิบายโค้ด
- สร้างสองย่อหน้า
<p>ไม่มีแอตทริบิวต์ - สร้างปุ่ม "CHANGE" เรียกใช้
changePara()เมื่อคลิก - ฟังก์ชัน
changePara()ดึงทุก<p>ด้วยgetElementsByTagName("P")เก็บในparagraphs(เป็น NodeList) - ใช้ดัชนี
[0]และ[1]เข้าถึงย่อหน้าแรกและที่สอง แล้วเปลี่ยนinnerHTMLและสไตล์
หมายเหตุ: ในโค้ดตัวอย่างเดิมมีข้อผิดพลาดใช้getElementsByClassName("PARA1")แทนที่จะเป็นgetElementsByTagName("P")ได้แก้ไขแล้วในตัวอย่างข้างต้น
