Thuộc tính nodeName trong JavaScript

• Bùi Tấn Lực
• 929
• 17/09/2025

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

Thuộc tính nodeName trong JavaScript dùng để lấy tên của các phần tử HTML kể cả khoảng trắng và chú thích và các node (nút).

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

let ketqua = tenbien.nodeName;

tenbien: Tên biến có thể là một phần tử HTML hoặc một nút (node).

ketqua: Kết quả trả về cho biến sau khi lấy nodeName.

Code Thuộc tính nodeName trong JavaScript

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

Lấy tên các phần tử HTML:

<h3>Xét tên thẻ img</h3>
<img id="hinhid" src="https://webmoi.vn/thumb/54x55/2/media/images/logo-web-moi.png" width="54" height="55" alt="Web Mới" title="Công Ty Web Mới" data-id="35" style="clear: both; margin-bottom: 10px; display: block;">
<p >Tên thẻ: <span id="kquaimg"></span></p>

<h3>Xét tên thẻ input</h3>
<input type="text" id="inputid" placeholder="Thẻ Input" > 
<p >Tên thẻ: <span id="kquainput"></span></p>

<h3>Xét tên thẻ ul</h3>
<ul id="ulid" >
 <li>Trang chủ</li>
 <li>Giới thiệu</li>
</ul>
<p >Tên thẻ: <span id="kquaul"></span></p>

<h3>Xét tên thẻ select</h3>
<select id="selectid" >
 <option>Trang chủ</option>
 <option>Giới thiệu</option>
</select>
<p >Tên thẻ: <span id="kquaselect"></span></p>
<h3>Xét tên thẻ h1</h3>
<h1 id="h1id">Thẻ h1</h1>
<p >Tên thẻ: <span id="kquah1"></span></p>
<script>
// Xét tên thẻ img
let hinhid = document.getElementById("hinhid").nodeName;
document.getElementById("kquaimg").innerHTML  = hinhid;
// Xét tên thẻ input
let inputid = document.getElementById("inputid").nodeName;
document.getElementById("kquainput").innerHTML  = inputid;
// Xét tên thẻ ul
let ulid = document.getElementById("ulid").nodeName;
document.getElementById("kquaul").innerHTML  = ulid;
// Xét tên thẻ select
let selectid = document.getElementById("selectid").nodeName;
document.getElementById("kquaselect").innerHTML  = selectid;
// Xét tên thẻ h1
let h1id = document.getElementById("h1id").nodeName;
document.getElementById("kquah1").innerHTML  = h1id;
</script>

Chạy Thử

Thuộc tính nodeName node (nút) trong JavaScript

Lấy tên các node (nút) như nút phần tử, nút văn bản, nút chú thích:

<script>
// Node (nút) phần tử div
const divElement = document.createElement('div');
document.write(divElement.nodeName+"<br>"); // Kết quả: "DIV"
// Node (nút) văn bản
const textNode = document.createTextNode("Xin chào");
document.write(textNode.nodeName+"<br>"); // Kết quả: "https://webmoi.vn/thuoc-tinh-nodename-trong-javascript/#text"
// Node (nút) chú thích
const commentNode = document.createComment("Đây là một bình luận");
document.write(commentNode.nodeName+"<br>"); // Kết quả: "https://webmoi.vn/thuoc-tinh-nodename-trong-javascript/#comment"
</script>

Kết quả:

DIV
#text
#comment

Chạy Thử

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

Lấy tên của các phần tử HTML kể cả khoảng trắng và chú thích:

<h1>Tiêu đề</h1>
<div>Nội dung tiêu đề</div>
<!--Chú thích tiêu đề-->
<p id="ketqua"></p>
<script>
const nodes = document.body.childNodes;
let text  = "";
for (let i = 0; i < nodes.length; i++) {
  text += nodes[i].nodeName + "<br>";
}
document.getElementById("ketqua").innerHTML = text;
</script>

Kết quả:

Tiêu đề
Nội dung tiêu đề
#text
H1
#text
DIV
#text
#comment
#text
P
#text
SCRIPT

Chạy Thử

Khi nào nên sử dụng nodeName trong JavaScript?

nodeName phù hợp khi cần xác định nhanh tên của một node trong DOM trước khi thực hiện thao tác tiếp theo. Thuộc tính này đặc biệt hữu ích trong các đoạn mã duyệt cây DOM, nơi chương trình cần biết node hiện tại là phần tử nào thay vì phải kiểm tra từng trường hợp riêng.

Kiểm tra loại phần tử HTML trước khi xử lý

Khi duyệt nhiều phần tử trong DOM, có thể dùng nodeName để xác định đúng thẻ HTML trước khi thay đổi nội dung, thuộc tính hoặc cấu trúc của phần tử. Cách này giúp điều kiện xử lý rõ ràng hơn, nhất là khi cùng một đoạn mã phải làm việc với nhiều loại phần tử.

const element = document.querySelector("#content");

if (element.nodeName === "DIV") {
    console.log("Đây là phần tử div");
}

Giá trị trả về của nodeName đối với các phần tử HTML thường được biểu diễn bằng chữ in hoa. Vì vậy, khi so sánh tên thẻ, nên sử dụng đúng định dạng hoặc chuẩn hóa giá trị trước khi kiểm tra để tránh điều kiện không khớp.

Phân biệt phần tử, văn bản và chú thích trong DOM

Khi duyệt qua childNodes, kết quả không chỉ gồm các phần tử HTML mà còn có thể xuất hiện node văn bản hoặc node chú thích. nodeName giúp nhận diện từng node dựa trên tên mà DOM cung cấp, từ đó lựa chọn cách xử lý phù hợp.

const nodes = document.querySelector("#content").childNodes;

nodes.forEach(node => {
    console.log(node.nodeName);
});

Điểm cần lưu ý là tên của node không phải lúc nào cũng là tên một thẻ HTML. Với node văn bản hoặc chú thích, nodeName có giá trị riêng. Vì vậy, không nên mặc định mọi kết quả nhận được đều là tên phần tử.

Kết hợp nodeName với nodeType để kiểm tra node chính xác

nodeName cho biết tên node, còn nodeType cho biết loại node. Khi cần xử lý DOM chắc chắn hơn, kết hợp hai thuộc tính này sẽ giúp tránh nhầm giữa phần tử HTML với văn bản hoặc chú thích có trong cùng một nhánh DOM.

const nodes = document.querySelector("#content").childNodes;

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

Cách kiểm tra này phù hợp với những đoạn mã cần duyệt DOM có kiểm soát. nodeType xác nhận node thuộc nhóm phần tử, sau đó nodeName xác định tên phần tử cần xử lý. Nhờ vậy, điều kiện rõ ràng và hạn chế việc áp dụng nhầm thao tác lên các node không phù hợp.

Lời kết

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