Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Khi sử dụng truy vấn getElementById(), querySelector(),... Chúng ta nhận được một object có thuộc tính childrenchildNodes, 2 thuộc tính này có kết quả giống nhau trong một số trường hợp, vậy chúng khác nhau ở điểm nào thì trong bài viết này chúng ta cùng nhau làm rõ nhé!

children vs childNodes

Để so sánh childrenchildNodes chúng ta cùng xem một ví dụ bên dưới:

<div id="content">
  Một số nội dung của blog homiedev
  <!-- blog link: https://homiedev.com/ -->
  <p>Học JavaScript cơ bản</p>
  <p>Javascript Projects For Beginners</p>
</div>

Để lấy giá trị childrenchildNodes từ một element, chúng ta có thể làm như sau:

const content = document.getElementById("content");

console.log(content);

Kết quả nhận được:

children vs childNodes getElementById

Như vậy với ví dụ trên, chúng ta có thể thấy rõ sự khác nhau giữa childrenchildNodes. Kết quả trả về của childNodes là một NodeList, object này chứa tất cả những thứ như elements, text và comments,... Ngược lại, với children ta chỉ nhận được những nodes là elements. Elements là những node được tạo bởi một thẻ (tag), ngoài ra kết quả trả về của children là một HTMLCollection.

Mỗi khi thao tác DOM, ví dụ như thêm/xóa children của div#content, cả childrenchildNodes của nó sẽ được update lại.

const content = document.getElementById("content");

console.log(content.childNodes.length); // 7
console.log(content.children.length); // 2

// thêm một element mới cho div#content
content.appendChild(document.createElement("p"));

// cả children và childNodes sẽ được update lại
console.log(content.childNodes.length); // 8
console.log(content.children.length); // 3

Như chúng ta đã thấy children và childNodes sẽ được update lại mỗi khi có sự thay đổi. Các bạn có thể đọc bài viết: So sánh HTMLCollection vs NodeList trong JavaScript để hiểu hơn nhé ^^.


Hi vọng bài viết giúp ích cho các bạn. Đừng quên theo dõi blog và đăng ký kênh youtube homiedev để theo dõi những nội dung về Frontend nhé ^^. Chúc các bạn học tốt.

Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.