Thuộc tính children trong JavaScript

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

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,..., chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính children trong JavaScript

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ử

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

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 *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn