Thuộc tính children của HTML DOM Element

Định nghĩa và cách sử dụng

children Thuộc tính trả về tập hợp các yếu tố con của yếu tố.

children Thuộc tính trả về đối tượng HTMLCollection.

Xin xem thêm:

Thuộc tính firstElementChild

Thuộc tính lastElementChild

Thuộc tính nextElementSibling

Thuộc tính previousElementSibling

Thuộc tính childElementCount

Thuộc tính childNodes

Nút HTML và yếu tố

Trong HTML DOMTrong (Đối tượng mô hình tài liệu) HTML tài liệu là tập hợp các nút có (hoặc không có) các nút con.

NútChỉ định các nút yếu tố, nút văn bản và nút ghi chú.

Yếu tốKhoảng trống giữa chúng cũng là nút văn bản.

Còn yếu tố chỉ là nút yếu tố.

Nút con và yếu tố con

childNodes Trả vềNút con（các nút yếu tố, nút văn bản và nút ghi chú）。

children Trả vềYếu tố con（không phải là các nút văn bản và ghi chú）。

Cùng loại với các yếu tố cùng loại

anh emLà 'anh em' và 'em gái'.

anh emlà các phần tử có cùng phần tử node (trong cùng childNodes danh sách).

phần tử anh emlà các phần tử có cùng phần tử cha (trong cùng children danh sách).

Mô hình

Ví dụ 1

Lấy bộ sưu tập các phần tử con của phần tử <body>:

const collection = document.body.children;

Thử nghiệm ngay

Ví dụ 2

Số lượng phần tử con của "myDIV":

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

Thử nghiệm ngay

Ví dụ 3

Thay đổi màu nền của phần tử con thứ hai của "myDIV":

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

Thử nghiệm ngay

Ví dụ 4

Lấy văn bản của phần tử con thứ ba của phần tử <select> (index 2):

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

Thử nghiệm ngay

Ví dụ 5

Duyệt qua tất cả các phần tử con của <body> và thay đổi màu nền của chúng:

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

Thử nghiệm ngay

Cú pháp

element.children

Giá trị trả về

Loại Mô tả
Đối tượng

Đối tượng HTMLCollection.

Bộ sưu tập các phần tử node.

Các phần tử được sắp xếp theo thứ tự xuất hiện trong tài liệu.

Hỗ trợ trình duyệt

element.children Là tính năng DOM Level 1 (1998).

Tất cả các trình duyệt đều hỗ trợ hoàn toàn nó:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ