Thuộc tính childNodes trong JavaScript

• Bùi Tấn Lực
• 906
• 18/09/2025

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

Thuộc tính childNodes trong JavaScript dùng để lấy danh sách các nút phần tử trong các phần tử HTML bao gồm cả khoảng trắng và chú thích, mỗi khoảng trắng dài hay ngắn nằm ngoài thẻ HTML đều là một nút văn bản.

Code Thuộc tính childNodes trong JavaScript

Thuộc tính childNodes lấy tên nút trong JavaScript

Lấy tên các nút phần tử bao gồm khoảng trắng và chú thích:

<h1>Thuộc tính childNodes lấy tên nút trong JavaScript</h1>
<!--Chú thích childNodes-->
<div>Nội dung thẻ DIV</div>
<p>Nội dung thẻ P</p>
<div id="ketqua"></div>
<script>
// Lấy tất cả các nút của các phần tử HTML có trong body
const nodes = document.body.childNodes;
let text = "";
for (let i = 0; i < nodes.length; i++) {
 // Lấy nodeName
  text += nodes[i].nodeName + "<br>";
}
// Nhúng kết quả vào id ketqua
document.getElementById("ketqua").innerHTML = text;
</script>

Kết quả:

#text
H1
#text
#comment
#text
DIV
#text
P
#text
DIV
#text
SCRIPT

Chạy Thử

Thuộc tính childNodes tạo hành động trong JavaScript

<div id="divtong">
<h1>Thuộc tính childNodes lấy tên nút trong JavaScript</h1>
<!--Chú thích childNodes-->
<div>Nội dung thẻ DIV</div>
<p>Nội dung thẻ P</p>
</div>
<script>
document.getElementById("divtong").childNodes[1].style.backgroundColor = "yellow";
document.getElementById("divtong").childNodes[5].style.backgroundColor = "red";
document.getElementById("divtong").childNodes[7].style.backgroundColor = "green";
</script>

Chạy Thử

Những lưu ý khi sử dụng childNodes trong JavaScript

childNodes hữu ích khi cần duyệt toàn bộ node con trực tiếp của một phần tử, nhưng kết quả trả về không chỉ gồm các phần tử HTML. Khoảng trắng, xuống dòng trong mã HTML cũng có thể được trình duyệt biểu diễn dưới dạng text node. Vì vậy, hiểu cách dữ liệu được trả về sẽ giúp tránh lỗi khi thao tác với DOM.

Vì sao childNodes có thể trả về cả node văn bản?

Khác với cách nhìn thông thường về cấu trúc HTML, DOM lưu nhiều loại node khác nhau. Khi gọi childNodes, JavaScript lấy các node con trực tiếp theo đúng cấu trúc DOM, trong đó có thể xuất hiện text node chứa nội dung chữ, khoảng trắng hoặc ký tự xuống dòng.

Chẳng hạn, giữa hai phần tử trong HTML có khoảng trắng hoặc xuống dòng, trình duyệt có thể tạo một text node tương ứng. Vì vậy, số lượng phần tử trong childNodes đôi khi lớn hơn số lượng thẻ HTML mà bạn nhìn thấy.

Đây là nguyên nhân khiến việc truy cập theo vị trí như childNodes[0] cần được thực hiện cẩn thận. Node đầu tiên không nhất thiết là phần tử HTML mà bạn đang mong muốn lấy.

Cách phân biệt phần tử HTML với node văn bản

Khi duyệt kết quả từ childNodes, có thể kiểm tra nodeType để xác định loại node trước khi thao tác. Phần tử HTML có nodeType bằng 1, trong khi text node có giá trị bằng 3.

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

parent.childNodes.forEach(node => {
    if (node.nodeType === 1) {
        console.log("Phần tử:", node);
    }

    if (node.nodeType === 3) {
        console.log("Node văn bản:", node.textContent);
    }
});

Cách kiểm tra này đặc biệt hữu ích khi nội dung bên trong phần tử được tạo từ nhiều đoạn HTML, có khoảng trắng hoặc được thay đổi trong quá trình chạy JavaScript. Thay vì giả định mọi node đều là phần tử, bạn xác định loại node trước rồi mới thực hiện thao tác phù hợp.

Khi nào nên dùng childNodes thay vì children?

Nên dùng childNodes khi bạn cần làm việc với toàn bộ node con trực tiếp, bao gồm cả text node. Điều này phù hợp với những trường hợp cần phân tích chính xác cấu trúc DOM hoặc xử lý nội dung văn bản nằm xen giữa các phần tử.

Ngược lại, nếu mục tiêu chỉ là lấy các phần tử HTML con để duyệt, thay đổi thuộc tính hoặc thao tác giao diện, children thường thuận tiện hơn vì nó chỉ trả về các phần tử thuộc nhóm element node.

Việc lựa chọn đúng thuộc tính giúp code dễ đọc và hạn chế lỗi do vô tình xử lý một text node như thể đó là phần tử HTML. Khi không cần quan tâm đến node văn bản, children thường là lựa chọn đơn giản hơn.

Lời kết

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