ตัวอย่าง HTML DOM Element children

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

children ตัวอย่างกลับค่าชุดของตัวเลือกย่อยขององค์ประกอบ

children ตัวอย่างกลับค่า HTMLCollection

โปรดดูเพิ่มเติมที่

ตัวอย่าง firstElementChild

ตัวอย่าง lastElementChild

ตัวอย่าง nextElementSibling

ตัวอย่าง previousElementSibling

ตัวอย่าง childElementCount

ตัวอย่าง childNodes

ตัวอย่างของ HTML และองค์ประกอบ

ใน HTML DOMใน (Document Object Model) และ HTML แบบ DOM คือชุดของตัวอย่างที่มี (หรือไม่มี) ตัวเลือกย่อย

ตัวอย่างหมายถึงตัวอย่างของโครงสร้าง HTML, ตัวอย่างของข้อความ และตัวอย่างของหมายเหตุ

องค์ประกอบช่องว่างระหว่างพวกเขาเช่นกันเป็นตัวอย่างของข้อความ

และองค์ประกอบเป็นตัวอย่างขององค์ประกอบ

ตัวเลือกย่อยและตัวเลือกย่อยขององค์ประกอบ

childNodes คืนค่าตัวเลือกย่อย（ตัวอย่างของโครงสร้าง HTML, ตัวอย่างของข้อความ และตัวอย่างของหมายเหตุ）。

children คืนค่าตัวเลือกย่อย（ไม่ใช่ข้อความและตัวอย่างของหมายเหตุ）。

พี่น้องและพี่น้องสาวของสามัญชน

คู่น้องคือ "พี่น้อง" และ "พี่น้องสาว"。

คู่น้องคือตัวเศษที่มีพ่อแม่เดียวกัน (ในเวลาเดียวกัน childNodes ในรายการ)。

องค์ประกอบคู่น้องคือองค์ประกอบที่มีพ่อแม่เดียวกัน (ในเวลาเดียวกัน children ในรายการ)。

ตัวอย่าง

ตัวอย่าง 1

เข้าถึงชุดของตัวเศษลูกของ <body>:

const collection = document.body.children;

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

ตัวอย่าง 2

"myDIV" มีกี่ตัวเศษลูก:

let count = document.getElementById("myDIV").children.length;

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

ตัวอย่าง 3

เปลี่ยนพื้นที่หลังของตัวเศษที่สองของ "myDIV":

const collection = document.getElementById("myDIV").children;
collection[1].style.backgroundColor = "yellow";

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

ตัวอย่าง 4

เข้าถึงข้อความของตัวเศษที่สาม (ดัชนี 2) ของ <select>:

const collection = document.getElementById("mySelect").children[2].text;

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

ตัวอย่าง 5

เดินทางเหนือ <body> ทุกตัวเศษลูกและเปลี่ยนพื้นที่หลังของเขา:

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

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

รูปแบบ

element.children

ค่าที่คืนค่า

ประเภท การอธิบาย
วัตถุ

วัตถุ HTMLCollection。

ชุดของตัวของเศษ。

องค์ประกอบเศษเป็นการจัดลำดับตามการปรากฏของเศษในเอกสาร。

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

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

ทุกเครื่องนับความสามารถต่าง ๆ รอบๆ รับการสนับสนุนอย่างเต็มที่:

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