Thuộc tính nodeType trong JavaScript

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

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

Thuộc tính nodeType trong JavaScript dùng để phân loại node (nút), giá trị phân loại của nodeType nằm trong khoảng từ 1 tới 12.

Code Thuộc tính nodeType trong JavaScript

Thuộc tính nodeType nút phần tử trong JavaScript

Nút phần tử tự tạo bằng document.createElement() hay nút phần tử sau khi document.getElementById() một phần tử HTML sẽ có nodeType bằng 1:

<div id="divid" >Nút phần tử của phần tử HTML DIV có nodeType: <span id="ketquadiv"></span></div>
<p id="pid" >Nút phần tử của phần tử HTML P có nodeType: <span id="ketquap"></span></p>
<p >Kết quả nút phần tử ul tự tạo: <span id="nutkq"></span></p>
<script>
// nutdiv là nút phần tử sau khi lấy phần tử html divid
const nutdiv = document.getElementById("divid");
// Nhúng nodeType
document.getElementById("ketquadiv").innerHTML = nutdiv.nodeType;
// nutp là nút phần tử sau khi lấy phần tử html pid
const nutp = document.getElementById("pid");
// Nhúng nodeType
document.getElementById("ketquap").innerHTML = nutp.nodeType;
// Tạo nút phần tử ul
const nutul = document.createElement("ul");
// Nhúng nodeType
document.getElementById("nutkq").innerHTML = nutul.nodeType;
</script>

Chạy Thử

Thuộc tính nodeType nút phần tử trong body trong JavaScript

Lấy tất cả các nút của các phần tử HTML nằm trong body bao gồm khoảng trắng, chú thích:

<h1>Thuộc tính nodeType nút phần tử trong body trong JavaScript</h1>
<!--Chú thích nodeType-->
<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 nodeType và nodeName
  text += nodes[i].nodeType + " " + nodes[i].nodeName + "<br>";
}
// Nhúng kết quả vào id ketqua
document.getElementById("ketqua").innerHTML = text;
</script>

Kết quả:

3 #text
1 H1
3 #text
8 #comment
3 #text
1 DIV
3 #text
1 P
3 #text
1 DIV
3 #text
1 SCRIPT

Chạy Thử

Bảng Thuộc tính nodeType trong JavaScript

Type		nodeName	nodeValue
1	Element	element name	null
2	Attr	attribute name	attribute value
3	Text	#text	content of node
4	CDATASection	#cdata-section	content of node
5	EntityReference	entity reference name	null
6	Entity	entity name	null
7	ProcessingInstruction	target	content of node
8	Comment	#comment	comment text
9	Document	#document	null
10	DocumentType	doctype name	null
11	DocumentFragment	#document fragment	null
12	Notation	notation name	null

Khi Nào Nên Sử Dụng nodeType Trong JavaScript?

nodeType phù hợp khi cần xác định một node thuộc nhóm nào trước khi thực hiện thao tác với nó. Cách này đặc biệt hữu ích khi duyệt DOM, bởi một vùng nội dung có thể chứa phần tử HTML, văn bản hoặc các loại node khác.

Kiểm tra loại node trước khi xử lý

Trước khi đọc thuộc tính hoặc thay đổi nội dung của một node, có thể kiểm tra nodeType để tránh xử lý nhầm đối tượng. Chẳng hạn, khi duyệt qua các node con, chỉ thực hiện thao tác DOM đối với node phần tử bằng cách kiểm tra giá trị bằng 1.

const nodes = document.querySelector("div").childNodes;

nodes.forEach(node => {
    if (node.nodeType === 1) {
        console.log("Đây là phần tử:", node.nodeName);
    }
});

Cách kiểm tra này giúp đoạn mã rõ ràng hơn, nhất là khi danh sách node có thể chứa cả khoảng trắng hoặc văn bản xen giữa các phần tử.

Phân biệt node phần tử và node văn bản

Trong quá trình duyệt DOM, node phần tử và node văn bản có thể xuất hiện cạnh nhau. nodeType giúp phân biệt hai trường hợp này nhanh chóng: giá trị 1 đại diện cho phần tử, còn giá trị 3 đại diện cho node văn bản.

const nodes = document.querySelector("div").childNodes;

nodes.forEach(node => {
    if (node.nodeType === 1) {
        console.log("Phần tử:", node.nodeName);
    } else if (node.nodeType === 3) {
        console.log("Văn bản:", node.nodeValue.trim());
    }
});

Điều này hữu ích khi cần lọc riêng nội dung chữ hoặc chỉ thao tác với các phần tử HTML mà không ảnh hưởng đến văn bản nằm trực tiếp bên trong node cha.

Kết hợp nodeType với nodeName để xác định node

nodeType cho biết nhóm của node, trong khi nodeName cung cấp tên của node đó. Kết hợp hai thuộc tính giúp việc kiểm tra chính xác hơn, đặc biệt khi mã JavaScript phải xử lý nhiều loại phần tử khác nhau.

const node = document.querySelector("div").firstChild;

if (node.nodeType === 1 && node.nodeName === "P") {
    console.log("Đây là phần tử p");
}

Cách kết hợp này phù hợp khi điều kiện xử lý không chỉ phụ thuộc vào loại node mà còn cần xác định cụ thể tên phần tử. Nhờ đó, mã nguồn có thể tránh thao tác nhầm lên node không thuộc đối tượng cần xử lý.

Lời kết

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