HTML DOM getElementsByTagName()เมธอด
❮ วัตถุธาตุตัวอย่าง
เปลี่ยนเนื้อหา HTML ขององค์ประกอบ <li> แรก (ดัชนี 0) ในรายการ:
var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";
ความหมายและการใช้งาน
เมธอด getElementsByTagName() ส่งคืนคอลเล็กชันองค์ประกอบย่อยขององค์ประกอบด้วยชื่อแท็กที่ระบุ เป็นออบเจ็กต์ NodeList
วัตถุ NodeList แสดงถึงชุดของโหนด โหนดสามารถเข้าถึงได้โดยหมายเลขดัชนี ดัชนีเริ่มต้นที่ 0
เคล็ดลับ:คุณสามารถใช้ คุณสมบัติ lengthของวัตถุ NodeList เพื่อกำหนดจำนวนโหนดย่อยที่มีชื่อแท็กที่ระบุ จากนั้นคุณสามารถวนซ้ำผ่านโหนดทั้งหมดและดึงข้อมูลที่คุณต้องการ
เคล็ดลับ:ค่าพารามิเตอร์ "*" จะคืนค่าองค์ประกอบย่อยขององค์ประกอบทั้งหมด
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
| Method | |||||
|---|---|---|---|---|---|
| getElementsByTagName() | 1.0 | 6.0 | 3.0 | 3.0 | 9.5 |
ไวยากรณ์
element.getElementsByTagName(tagname)
ค่าพารามิเตอร์
| Parameter | Type | Description |
|---|---|---|
| tagname | String | Required. The tagname of the child elements you want to get |
รายละเอียดทางเทคนิค
| เวอร์ชัน DOM | วัตถุองค์ประกอบหลักระดับ 1 |
|---|---|
| คืนมูลค่า: | ออบเจ็กต์ NodeList แสดงถึงคอลเล็กชันขององค์ประกอบย่อยขององค์ประกอบที่มีชื่อแท็กที่ระบุ องค์ประกอบในคอลเล็กชันที่ส่งคืนจะถูกจัดเรียงตามที่ปรากฏในซอร์สโค้ด |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ค้นหาจำนวน <p> องค์ประกอบภายใน <div> องค์ประกอบ (โดยใช้คุณสมบัติความยาวของวัตถุ NodeList):
var x =
document.getElementById("myDIV").getElementsByTagName("P").length;
ตัวอย่าง
เปลี่ยนสีพื้นหลังของ <p> องค์ประกอบที่สอง (ดัชนี 1) ภายใน <div> องค์ประกอบ:
var x =
document.getElementById("myDIV");
x.getElementsByTagName("P")[1].style.backgroundColor = "red";
ตัวอย่าง
เปลี่ยนสีพื้นหลังขององค์ประกอบ <p> ทั้งหมดภายในองค์ประกอบ <div>:
var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("P");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
ตัวอย่าง
เปลี่ยนสีพื้นหลังขององค์ประกอบที่สี่ (ดัชนี 3) ภายในองค์ประกอบ <div>:
var x = document.getElementById("myDIV");
x.getElementsByTagName("*")[3].style.backgroundColor = "red";
ตัวอย่าง
การใช้พารามิเตอร์ "*"
เปลี่ยนสีพื้นหลังขององค์ประกอบทั้งหมดภายใน <div> องค์ประกอบ:
var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("*");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
หน้าที่เกี่ยวข้อง
การอ้างอิง JavaScript: document.getElementsByTagName()
บทช่วยสอน JavaScript: รายการโหนด JavaScript HTML DOM
❮ วัตถุธาตุ