Phần tử HTML DOM con
Ví dụ
Lấy một bộ sưu tập các phần tử con của phần tử <body>:
const collection = document.body.children;
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Thuộc tính children
trả về tập hợp các phần tử con của một phần tử.
Thuộc tính children
trả về một đối tượng HTMLCollection .
Nút HTML so với các phần tử
Trong HTML DOM (Mô hình đối tượng tài liệu), tài liệu HTML là tập hợp các nút có (hoặc không có) nút con.
Các nút là các nút phần tử, nút văn bản và nút nhận xét.
Khoảng trắng giữa các phần tử cũng là các nút văn bản.
Các phần tử chỉ là các nút phần tử.
conNodes vs trẻ em
childNodes trả về các nút con (nút phần tử, nút văn bản và nút nhận xét).
trẻ em trả về các phần tử con (không phải nút văn bản và nhận xét).
Anh chị em vs Anh chị em nguyên tố
Anh chị em là “anh em” và “chị em”.
Anh chị em là các nút có cùng cha mẹ (trong cùng danh sách nút con ).
Anh chị em phần tử là các phần tử có cùng cha mẹ (trong cùng danh sách con ).
Cú pháp
element .children
Giá trị trả về
Kiểu | Sự miêu tả |
Sự vật | Một đối tượng HTMLCollection . Tập hợp các nút phần tử. Các phần tử được sắp xếp khi chúng xuất hiện trong tài liệu. |
Thêm ví dụ
"myDIV" có bao nhiêu đứa con:
let count = document.getElementById("myDIV").children.length;
Hãy tự mình thử »Thay đổi nền của phần tử con thứ hai của "myDIV":
const collection = document.getElementById("myDIV").children;
collection[1].style.backgroundColor = "yellow";
Hãy tự mình thử »Lấy văn bản của phần tử con thứ ba (chỉ mục 2) của phần tử <select>:
const collection = document.getElementById("mySelect").children[2].text;
Hãy tự mình thử »Lặp lại tất cả các phần tử con của <body> và thay đổi nền của chúng:
const collection = document.body.children;
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
Hãy tự mình thử »Hỗ trợ trình duyệt
element.children
là tính năng DOM Cấp 1 (1998).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |