เมธอด HTML DOM NodeList item()

คำนำหน้าและการใช้งาน

item() วิธีนี้กลับคืนตัวประกอบที่มีตำแหน่งที่ระบุใน NodeList。

มีวิธีสองทางเพื่อเข้าถึงตัวประกอบที่มีตำแหน่งที่ระบุ:

list.item(ตัวเลขที่คาดหวัง (index))

หรือ

list[ตัวเลขที่คาดหวัง (index)]

วิธีที่ง่ายและเป็นที่นิยมที่สุดคือ [ตัวเลขที่คาดหวัง (index)]。

ตัวอย่าง

ตัวอย่าง 1

เข้าถึงตัวประกอบลูกขององค์ประกอบ <body>:

const nodeList = document.body.childNodes;

ลองเดาเอง

ตัวอย่าง 2

เข้าถึงชื่อโครงสร้างของตัวประกอบลูกแรก:

const list = document.body.childNodes;
let name = list.item(0).nodeName;

ลองเดาเอง

ตัวอย่าง 3

ผลลัพธ์ของตัวอย่างนี้เหมือนกัน:

const list = document.body.childNodes;
let name = list[0].nodeName;

ลองเดาเอง

ตัวอย่าง 4

เข้าถึง HTML หลักขององค์ประกอบ <p> แรกในเอกสาร:

const list = document.getElementsByTagName("p");
let text = list.item(0).innerHTML;

ลองเดาเอง

ตัวอย่าง 5

เอา HTML ขององค์ประกอบ <p> แรกใน "myDIV":

const div = document.getElementById("myDIV");
const list = div.getElementsByTagName("p");
let text = list[0].innerHTML;

ลองเดาเอง

ตัวอย่าง 6

เปลี่ยน HTML ขององค์ประกอบ <p> แรกใน "myDIV":

const div = document.getElementById("myDIV");
const list = div.getElementsByTagName("p");
let text = list[0].innerHTML = "Paragraph changed";

ลองเดาเอง

ตัวอย่าง 7

เปลี่ยนสีของทุกส่วนที่มี class="child":

const list = document.querySelectorAll(".child");
for (let i = 0; i < list.length; i++) {
  list[i].style.color = "red";
}

ลองเดาเอง

รูปแบบ

nodelist.item(ตัวเลขที่คาดหวัง (index))

หรือย่อไว้เป็น:

nodelist[ตัวเลขที่คาดหวัง (index)]

ตัวแปร

ตัวแปร การอธิบาย
ตัวเลขที่คาดหวัง (index)

สำคัญ

เนื้อหาตัวเลขตามลำดับที่ปรากฏในเอกสาร

ตัวเลขเริ่มต้นจาก 0

ค่าที่ส่งออกมา

รูปแบบ การอธิบาย
วัตถุ ตำแหน่งของตัวเลขที่กำหนด
null ถ้าตัวเลขดังกล่าวเกินขอบเขต

การสนับสนุนโปรแกรมบราวเซอร์

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

ทุกบราวเซอร์สมัยใหม่ทุกชนิดตอบรับมัน:

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

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

รายละเอียด length

วิธี entries()

วิธี forEach()

วิธี keys()

วิธี values()

เป้าหมาย NodeList

วิธี childNodes()

วิธี querySelectorAll()

วิธี getElementsByName()