Thuộc tính children trong JavaScript

• Bùi Tấn Lực
• 1281
• 13/09/2025

Chức năng của Thuộc tính children trong JavaScript

Thuộc tính children trong JavaScript dùng để lấy thông tin từng phần tử HTML trong một thẻ select, ul, body,... ngoài ra còn đếm được tổng số phần tử con, bạn có thể thực hiện css lên từng phần tử HTML khác nhau.

Cú pháp của thẻ Thuộc tính children trong JavaScript

const danhsach = tenbiencha.children;

tenbiencha: Tên biến cha là phần tử HTML chứa các phần tử con, thường dùng document.getElementById("giá trị id") để lấy.

danhsach: Danh sách các phần tử con được trả về.

Code Thuộc tính children trong JavaScript

Thuộc tính children dạng list trong JavaScript

Ở ví dụ này mình lặp những phần tử con và lấy giá trị và tên thẻ của chúng:

const list = document.getElementById("selectid").children;

<select id="selectid">
 <option value="19">19 Tuổi</option>
 <option value="20">20 Tuổi</option>
 <option value="21">21 Tuổi</option>
 <option value="22">22 Tuổi</option>
 <option value="23">20 Tuổi</option>
</select>
<br>
<script>
const soluong = document.getElementById("selectid").children.length;
document.write("<b> Số lượng phần tử: "+soluong+"</b><br>");
const list = document.getElementById("selectid").children;
for (let i = 0; i < list.length; i++) {
   document.write("<b>"+list[i].innerHTML+"</b><br>");
   document.write("value: "+list[i].value+"<br>");
   document.write("Tên thẻ: "+list[i].tagName+"<br>");
}
</script>

Chạy Thử

Thuộc tính children từng phần tử trong JavaScript

Ở ví dụ này mình lấy giá trị, tên thẻ, thay đổi nội dung của từng phần tử con:

document.getElementById("selectid").children[0].value;

<select id="selectid">
 <option value="19">19 Tuổi</option>
 <option value="20">20 Tuổi</option>
 <option value="21">21 Tuổi</option>
 <option value="22">22 Tuổi</option>
 <option value="23">20 Tuổi</option>
</select>
<br>
<script>
const soluong = document.getElementById("selectid").children.length;
// Lấy thông tin phần tử ở vị trí 0
document.write("<b> Số lượng phần tử: "+soluong+"</b><br>");
document.write("Tên: "+document.getElementById("selectid").children[0].innerHTML+"<br>");
document.write("Value: "+document.getElementById("selectid").children[0].value+"<br>"); 
document.write("Tên thẻ: "+document.getElementById("selectid").children[0].tagName+"<br>");
// Trường hợp phần tử HTML khác như ul, p, div,.. thì có thể css cho nó
// document.getElementById("selectid").children[0].style.backgroundColor = "yellow";
</script>

Chạy Thử

Khi nào nên sử dụng children trong JavaScript?

children phù hợp khi cần lấy hoặc duyệt trực tiếp các phần tử HTML nằm bên trong một phần tử cha. Điểm đáng chú ý là thuộc tính này chỉ quan tâm đến element, nên văn bản và khoảng trắng nằm giữa các thẻ sẽ không được đưa vào kết quả.

Trong thực tế, children thường hữu ích khi xử lý menu, danh sách, nhóm nút hoặc các thành phần giao diện có cấu trúc cha – con rõ ràng. Thay vì tìm từng phần tử riêng lẻ, bạn có thể lấy toàn bộ phần tử con rồi duyệt qua chúng để đọc dữ liệu hoặc thay đổi giao diện.

const menu = document.querySelector('.menu');
const items = menu.children;

for (const item of items) {
    console.log(item.textContent);
}

Cách này đặc biệt thuận tiện khi cấu trúc HTML đã xác định rõ phần tử nào là con trực tiếp của phần tử cần xử lý.

Phân biệt children với childNodes trong JavaScript

children và childNodes đều có thể dùng để truy cập nội dung bên trong một phần tử, nhưng phạm vi dữ liệu mà chúng trả về khác nhau. children chỉ trả về các phần tử HTML con trực tiếp, còn childNodes có thể bao gồm cả node văn bản, khoảng trắng và một số loại node khác.

const box = document.querySelector('.box');

console.log(box.children);
console.log(box.childNodes);

Vì vậy, nếu mục tiêu là thao tác với các thẻ HTML con, children thường là lựa chọn rõ ràng hơn. Ngược lại, khi cần làm việc với toàn bộ node bên trong phần tử, childNodes mới phù hợp.

Kiểm tra và xử lý phần tử con bằng children

Thuộc tính children trả về một HTMLCollection. Bạn có thể kiểm tra số lượng phần tử con thông qua length, sau đó truy cập từng phần tử theo vị trí hoặc duyệt qua tập hợp này.

const list = document.querySelector('.list');

if (list.children.length > 0) {
    for (const item of list.children) {
        item.classList.add('active');
    }
}

Cách kiểm tra này giúp tránh xử lý khi phần tử cha chưa có phần tử con. Khi cần thay đổi đồng loạt các phần tử trực tiếp bên trong một vùng giao diện, đây là cách triển khai ngắn gọn và dễ kiểm soát.

Những lưu ý khi truy cập phần tử con bằng children

• children chỉ lấy phần tử con trực tiếp, không tự động đi sâu vào các cấp HTML bên trong.
• Kết quả là HTMLCollection, không phải mảng JavaScript thông thường.
• Nếu phần tử được chọn không tồn tại, cần kiểm tra kết quả của querySelector() trước khi truy cập children.
• Không nên dùng children khi cần xử lý cả node văn bản hoặc khoảng trắng; trường hợp đó nên cân nhắc childNodes.
• Khi chỉ cần tìm một phần tử con theo điều kiện cụ thể, querySelector() hoặc querySelectorAll() có thể phù hợp hơn việc duyệt toàn bộ tập hợp.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính children trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Thuộc tính children trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp