วิธี getElementsByTagName() ของ HTML DOM

คำนิยามและวิธีใช้

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

วลี

document.getElementsByTagName(tagname)

ชี้แจง

ลำดับขององค์ประกอบที่กลับมาจาก getElementsByTagName() นั้นเป็นลำดับขององค์ประกอบในเอกสาร

ถ้าส่งมอบตัวอักษรพิเศษ "*" ให้กับ getElementsByTagName() มันจะคืนรายชื่อทั้งหมดขององค์ประกอบในเอกสาร โดยลำดับขององค์ประกอบนั้นเป็นลำดับที่องค์ประกอบนั้นอยู่ในเอกสาร

คำเตือนและหมายเหตุ

หมายเหตุ:ข้อความที่ส่งมอบให้กับ getElementsByTagName() อาจแบ่งประเภทตามขนาดตัวอักษรไม่ได้

ตัวอย่าง

ตัวอย่าง 1

<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("input");
  alert(x.length);
  }
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many input elements?" />
</body>
</html>

ตัวอย่าง 2

คุณสามารถใช้วิธี getElementsByTagName() ที่จะหาบันทึกขององค์ประกอบ HTML ทุกชนิดได้ ตัวอย่างเช่น รหัสที่ด้านล่างนี้สามารถหาทั้งหมดของตารางในเอกสารได้

var tables = document.getElementsByTagName("table");
alert ("This document contains " + tables.length + " tables");

ตัวอย่าง 3

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

var myParagragh = document.getElementsByTagName("p")[3];

อย่างไรก็ตาม พวกเรายังคงคิดว่า ถ้าคุณต้องการที่จะปฎิบัติต่อองค์ประกอบเฉพาะที่เจาะจง ใช้วิธี getElementById() จะมีประสิทธิภาพมากขึ้น