เด็กองค์ประกอบ HTML DOM
วัตถุธาตุตัวอย่าง
รับคอลเล็กชันลูกขององค์ประกอบ <body>:
const collection = document.body.children;
ตัวอย่างเพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติchildren
ส่งคืนคอลเลกชันขององค์ประกอบลูกขององค์ประกอบ
คุณสมบัติchildren
ส่งคืนวัตถุ HTMLCollection
ความแตกต่าง
คุณสมบัติchildNodes
ส่งคืนโหนดย่อยทั้งหมดรวมถึงโหนดข้อความและโหนดความคิดเห็น ในขณะที่children
คุณสมบัติส่งคืนเฉพาะองค์ประกอบย่อยเท่านั้น
ดูสิ่งนี้ด้วย:
คุณสมบัติ childNodes ขององค์ประกอบ
HTMLCollection
HTMLCollection คือ ชุดของโหนด HTML
โหนดในคอลเล็กชันสามารถเข้าถึงได้ด้วยหมายเลขดัชนี ดัชนีเริ่มต้นที่ 0
คุณสมบัติความยาวส่งคืนจำนวนองค์ประกอบในคอลเลกชัน
ไวยากรณ์
element.children
คืนมูลค่า
พิมพ์ | คำอธิบาย |
วัตถุ | วัตถุ HTMLCollection การรวบรวมโหนดองค์ประกอบ องค์ประกอบจะถูกจัดเรียงตามที่ปรากฏในเอกสาร |
ตัวอย่างเพิ่มเติม
ค้นหาว่าองค์ประกอบ <div> มีกี่ลูก:
var c =
document.getElementById("myDIV").children.length;
เปลี่ยนสีพื้นหลังขององค์ประกอบลูกที่สองของ <div> องค์ประกอบ:
var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow";
รับข้อความขององค์ประกอบลูกที่สาม (ดัชนี 2) ขององค์ประกอบ <select>:
var c = document.getElementById("mySelect").children[2].text;
วนซ้ำลูกทั้งหมดของ <body> และเปลี่ยนสีพื้นหลังเป็นสีแดง:
var c = document.body.children;
var i;
for (i = 0; i < c.length; i++) {
c[i].style.backgroundColor = "red";
}
หน้าที่เกี่ยวข้อง
การอ้างอิง HTML DOM: คุณสมบัติ childNodes
รองรับเบราว์เซอร์
element.children
เป็นคุณลักษณะ DOM ระดับ 1 (1998)
ได้รับการสนับสนุนอย่างเต็มที่ในเบราว์เซอร์ทั้งหมด:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |
วัตถุธาตุ