วิธีการ getElementsByTagName() ของ HTML DOM Document

นิยามและการใช้งาน

getElementsByTagName() ตัวฟังก์ชันกลับค่าชุดของแอลเลิมที่มีชื่อแอลเลิมที่กำหนด:

getElementsByTagName() ตัวฟังก์ชันกลับค่า HTMLCollection.

getElementsByTagName() นิยามของตัวแปรเป็นอ่านเฉพาะ:

หมายเหตุ:getElementsByTagName("*") กลับค่าแอลเลิมทั้งหมดในเอกสาร:

HTMLCollection

HTMLCollection เป็นชุดของ HTML อย่างเป็นแอลเลิม (ลิสต์):

สามารถเข้าถึงแอลเลิมในชุดด้วยดัชนี (เริ่มต้นที่ 0) ได้:

length นิยามกลุ่มตัวแปร กลับค่าจำนวนของแอลเลิมในชุด:

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

ตัวฟังก์ชัน getElementById()

ตัวฟังก์ชัน getElementsByClassName()

ตัวฟังก์ชัน querySelector()

ตัวฟังก์ชัน querySelectorAll()

HTMLCollection วัตถุ

ตัวอย่าง

ตัวอย่าง 1

ดึงแอลเลิมทั้งหมดที่มีชื่อแอลเลิม "li":

const collection = document.getElementsByTagName("li");

ทดสอบเอง

ตัวอย่าง 2

ดึงแอลเลิมทั้งหมดในเอกสาร:

const collection = document.getElementsByTagName("*");

ทดสอบเอง

ตัวอย่าง 3

เปลี่ยน HTML ภายในแอลเลิม <p> แรกของเอกสาร:

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

ทดสอบเอง

ตัวอย่าง 4

จำนวนของแอลเลิม <li> ในเอกสาร:

let numb = document.getElementsByTagName("li").length;

ทดสอบเอง

ตัวอย่าง 5

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

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

ทดสอบเอง

คำสั่ง

document.getElementsByTagName(tagName)

ชื่อแท็กขององค์ประกอบ

ชื่อแท็กขององค์ประกอบ รายละเอียด
tagName สำคัญ

ค่าที่กลับค่า

ประเภท รายละเอียด
วัตถุ

HTMLCollection ตัวเอง

ชุดขององค์ประกอบที่มีชื่อแท็กที่กำหนด

จัดการเรียงลำดับตามลำดับที่องค์ประกอบปรากฏในเอกสาร

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

วิธีการนี้จะกลับค่า NodeList ตัวเอง (ซึ่งสามารถจัดการเหมือนตัวแปลแบบตารางที่มีสภาพเปิด) ซึ่งเก็บองค์ประกอบ Element ที่มีชื่อแท็กที่กำหนดในเอกสาร โดยเรียงลำดับตามลำดับที่ปรากฏในเอกสารต้นกำเนิด

NodeList ตัวเองเป็น 'มีชีวิต' คือถ้ามีการเพิ่มหรือลบองค์ประกอบที่มีชื่อแท็กที่กำหนดในเอกสาร สมบัติของมันจะได้รับการปรับปรุงโดยอัตโนมัติ

เอกสาร HTML ไม่แบ่งปันของตัวอักษรในรูปแบบการเขียนตัวอักษร ดังนั้น สามารถกำหนดรูปแบบการเขียนตัวอักษรใดๆ ที่ต้องการ tagNameมันจะตรงกับแท็กที่มีชื่อเดียวกันทั้งหมดในเอกสาร ไม่ว่าแท็กนั้นจะมีรูปแบบการเขียนตัวอักษรใดๆ ในเอกสารต้นกำเนิดtagName ตรงกับแท็กที่มีชื่อและรูปแบบการเขียนตัวอักษรที่ครอบคลุมในเอกสารต้นกำเนิด

คำแนะนำ:Element ส่วนของเอกสารนั้นกำหนดวิธีการที่มีชื่อเดียวกัน ซึ่งมีการค้นหาแต่เฉพาะต้นไม้ของเอกสาร นอกจากนี้ โซ่มือเอกสาร HTMLDocument ก็กำหนด วิธีการ getElementByName()มันสืบค้นหาตัวองค์ประกอบตามค่าของอัตรายะที่มีชื่อ (ไม่ใช่ชื่อแท้งคำ) ของอัตรายะ

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

document.getElementsByTagName() เป็นคุณสมบัติของ DOM Level 1 (1998)

ทุกบราวเซอร์ทุกตัวสนับสนุนมัน:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน 9-11 สนับสนุน สนับสนุน สนับสนุน สนับสนุน

หน้าที่เกี่ยวข้อง

คู่มืออ้างอิง JavaScript:element.getElementsByTagName()

วิชาะการ JavaScript:รายการตัวแทนของ HTML DOM ของ JavaScript