Thuộc tính childElementCount trong JavaScript

• Bùi Tấn Lực
• 973
• 15/09/2025

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

Thuộc tính childElementCount trong JavaScript dùng để đếm số phần tử HTML nằm trong một thẻ HTML khác mà không tính chú thích và khoảng trắng, thuộc tính này giống với thuộc tính children.length.

Cú pháp của Thuộc tính childElementCount trong JavaScript

let ketqua = tenbien.childElementCount;

tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy.

ketqua: Kết quả trả về số phần tử con.

Code Thuộc tính childElementCount trong JavaScript

let numb = document.getElementById("ulmot").childElementCount;

<ul id="ulmot">
    <li>Trang chủ</li>
    <li>Giới thiệu</li>
    <li>Blog</li>
</ul>
<p>Số phần tử html li nằm trong thẻ ul: <span id="sotheli"></span></p>
<div id="divid">
 <!--Đếm số thẻ html-->
 <p>Hàng 1</p>
 <p>Hàng 2</p>
 <input type="text">
</div>
<p>Đếm số thẻ html nằm trong thẻ div, không tính chú thích và khoảng trắng: <span id="sothe"></span></p>
<script>
  // Đếm số thẻ li
  let numb = document.getElementById("ulmot").childElementCount;
  document.getElementById("sotheli").innerHTML = numb;
  // Đếm số thẻ html nằm trong thẻ div, không tính chú thích và khoảng trắng
  let numbhai = document.getElementById("divid").childElementCount;
  document.getElementById("sothe").innerHTML = numbhai;
</script>

Chạy Thử

So sánh childElementCount với children.length trong JavaScript

Khi cần biết một phần tử có bao nhiêu phần tử HTML con trực tiếp, childElementCount và children.length đều có thể cho cùng một kết quả. Điểm khác biệt chủ yếu nằm ở cách truy cập dữ liệu và mục đích sử dụng trong từng đoạn mã.

childElementCount và children.length có gì giống nhau?

Cả hai đều chỉ đếm phần tử con trực tiếp của một phần tử, không tính các phần tử nằm sâu hơn bên trong. Các nút văn bản, khoảng trắng hoặc comment cũng không được tính vào kết quả.

Ví dụ, một danh sách có ba phần tử con trực tiếp thì cả hai cách đều trả về số 3:

<ul id="menu">
  <li>Trang chủ</li>
  <li>Giới thiệu</li>
  <li>Liên hệ</li>
</ul>

const menu = document.querySelector("#menu");

console.log(menu.childElementCount);
console.log(menu.children.length);

Trong trường hợp này, hai biểu thức đều cho kết quả 3. Vì vậy, nếu chỉ cần đếm số phần tử con trực tiếp thì cả hai đều đáp ứng được yêu cầu.

Khi nào nên dùng childElementCount thay cho children.length?

Nên ưu tiên childElementCount khi mục tiêu duy nhất là lấy số lượng phần tử con. Cách viết ngắn gọn và thể hiện trực tiếp ý định của đoạn mã, đặc biệt phù hợp với các thao tác kiểm tra số lượng.

const container = document.querySelector(".container");

if (container.childElementCount > 0) {
  console.log("Có phần tử con");
}

Ngược lại, children.length phù hợp hơn khi bạn không chỉ cần số lượng mà còn muốn truy cập danh sách các phần tử con để tiếp tục xử lý.

const container = document.querySelector(".container");

for (let i = 0; i < container.children.length; i++) {
  console.log(container.children[i]);
}

Do đó, có thể hiểu đơn giản: childElementCount tập trung vào số lượng, còn children cung cấp tập hợp phần tử để có thể truy cập từng phần tử khi cần.

Đếm phần tử con trực tiếp với childElementCount

Một ưu điểm thực tế của childElementCount là có thể kiểm tra nhanh cấu trúc DOM trước khi thực hiện một thao tác tiếp theo. Điều này hữu ích với menu, danh sách sản phẩm, bảng dữ liệu hoặc các vùng nội dung được tạo động bằng JavaScript.

const list = document.querySelector("#product-list");

if (list.childElementCount === 0) {
  console.log("Danh sách chưa có sản phẩm");
} else {
  console.log(`Có ${list.childElementCount} phần tử trong danh sách`);
}

Cách kiểm tra này chỉ quan tâm đến những phần tử nằm ngay bên trong list. Nếu một phần tử con tiếp tục chứa nhiều phần tử khác, các phần tử ở cấp sâu hơn không làm thay đổi giá trị của childElementCount.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính childElementCount 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 childElementCount 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