เมธอด HTML DOM Element getElementsByTagName()

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

getElementsByTagName() เมธอดนี้กลับค่าชุดขององค์ประกอบที่มีชื่อแทกที่กำหนด โดยต้นตัวเลขเริ่มต้นที่ 0.

คำเตือน:ค่าประมาณ "*" กลับค่าของทั้งหมดหลักประกอบในองค์ประกอบ.

ดูเพิ่มเติม:

เมธอด getElementsByClassName()

เมธอด querySelector()

เมธอด querySelectorAll()

NodeList

NodeList เป็นชุดของตัวองค์ประกอบที่เหมือนตัวเลข (array-like).

คุณสามารถเข้าถึงตัวองค์ประกอบในรายการด้วยดัชนี (index) โดยต้นตัวเลขเริ่มต้นที่ 0.

length รายละเอียดกลับค่าจำนวนของตัวองค์ประกอบในรายการ.

ตัวอย่าง

ตัวอย่าง 1

เปลี่ยนเนื้อหา HTML ขององค์ประกอบ <li> แรกในรายการ:

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

ลองด้วยตัวเอง

ตัวอย่าง 2

จำนวนขององค์ประกอบ <p> ใน "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

ลองด้วยตัวเอง

ตัวอย่าง 3

เปลี่ยนขนาดตัวอักษรขององค์ประกอบ <p> ที่สองใน "myDIV":

const element = document.getElementById("myDIV");
element.getElementsByTagName("p")[1].style.fontSize = "24px";

ลองด้วยตัวเอง

ตัวอย่าง 4

เปลี่ยนสีพื้นหลังของทั้งหมด <p> ใน "myDIV":

const div = document.getElementById("myDIV");
const nodes = x.getElementsByTagName("P");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

ลองด้วยตัวเอง

ตัวอย่าง 5

เปลี่ยนสีพื้นหลังขององค์ประกอบที่สี่ (ดัชนี 3) ใน "myDIV":

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

ลองด้วยตัวเอง

ตัวอย่าง 6

ใช้ "*" ตัวอย่าง เพื่อเปลี่ยนสีหลังของทุกองค์ประกอบใน "myDIV":

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

ลองด้วยตัวเอง

วิธีการใช้

element.getElementsByTagName(tagname)

ตัวอย่าง

ตัวอย่าง รายละเอียด
tagname จำเป็น。ชื่อประกาศของลูกหลาน

ค่าที่ควรมี

ประเภท รายละเอียด
NodeList

ลูกหลานขององค์ประกอบที่มีชื่อประกาศที่กำหนด

องค์ประกอบจะถูกจัดลำดับตามลำดับที่ปรากฏในแหล่งข้อมูลแบบแถวลำดับ

รายละเอียดเทคนิค

getElementsByTagName() วิธีนี้จะเดินทางผ่านลูกหลานขององค์ประกอบที่กำหนด แล้วก็จะกลับค่าแบบแถวลำดับ (NodeList อินเตอร์เฟซ) ที่มีองค์ประกอบทั้งหมดที่มีชื่อประกาศที่กำหนด ลำดับขององค์ประกอบในค่าแบบแถวลำดับนั้นเท่ากับลำดับที่องค์ประกอบนั้นปรากฏในแหล่งข้อมูลแบบแถวลำดับของเอกสาร

จำเป็น

Document อินเตอร์เฟซก็ได้ถูกนิยาม วิธี getElementsByTagName()เช่นเดียวกันกับวิธีนี้ แต่เป็นการเดินทางผ่านทั้งหมดของเอกสาร ไม่ใช่การเดินทางผ่านลูกหลานขององค์ประกอบ

ไม่ควรที่จะทำให้เข้าใจผิดกัน ตัวอย่างของ HTMLDocument.getElementsByName() ไม่ควรที่จะทำให้เข้าใจผิดกัน ที่มาหลังใช้ตัวบวกของประกาศที่มีชื่อองค์ประกอบที่ใช้ในการค้นหาองค์ประกอบ ไม่ใช่ตามชื่อประกาศ

การสนับสนุนของบราวเซอร์

ทุกบราวเซอร์ทุกครั้งสนับสนุน element.getElementsByTagName()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน