Thuộc tính tagName trong JavaScript

• Bùi Tấn Lực
• 912
• 12/09/2025

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

Thuộc tính tagName trong JavaScript dùng để lấy tên thẻ HTML, kết quả trả về là tên của thẻ và được viết hoa.

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

let ketqua = tenbien.tagName;

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ề là tên thẻ HTML viết hoa.

Code Thuộc tính tagName trong JavaScript

let h1id = document.getElementById("h1id").tagName;

<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").tagName;
document.getElementById("kquaimg").innerHTML  = hinhid;
// Xét tên thẻ input
let inputid = document.getElementById("inputid").tagName;
document.getElementById("kquainput").innerHTML  = inputid;
// Xét tên thẻ ul
let ulid = document.getElementById("ulid").tagName;
document.getElementById("kquaul").innerHTML  = ulid;
// Xét tên thẻ select
let selectid = document.getElementById("selectid").tagName;
document.getElementById("kquaselect").innerHTML  = selectid;
// Xét tên thẻ h1
let h1id = document.getElementById("h1id").tagName;
document.getElementById("kquah1").innerHTML  = h1id;
</script>

Chạy Thử

Ứng dụng tagName để kiểm tra loại phần tử HTML

Trong quá trình xử lý DOM, tagName có thể được dùng để xác định phần tử mà người dùng đang tương tác hoặc phần tử vừa được JavaScript lấy ra. Từ tên thẻ nhận được, chương trình có thể lựa chọn cách xử lý phù hợp thay vì áp dụng cùng một thao tác cho mọi phần tử.

Kiểm tra phần tử trước khi thực hiện thao tác DOM

Khi xử lý một nhóm phần tử khác nhau, kiểm tra tagName trước khi thao tác giúp hạn chế việc gọi sai thuộc tính hoặc phương thức. Chẳng hạn, một sự kiện có thể được gắn vào nhiều phần tử nhưng mỗi loại thẻ lại cần cách xử lý riêng.

const element = document.querySelector(".item");

if (element.tagName === "INPUT") {
    console.log("Đây là ô nhập liệu");
} else if (element.tagName === "BUTTON") {
    console.log("Đây là nút bấm");
}

Cách này đặc biệt hữu ích khi JavaScript làm việc với các phần tử được tạo động hoặc khi cấu trúc giao diện có nhiều loại phần tử cùng tham gia một luồng xử lý.

Kết hợp tagName với điều kiện if trong JavaScript

tagName thường phát huy hiệu quả khi kết hợp với if, else if hoặc switch. JavaScript có thể dựa vào tên thẻ để phân nhánh logic và thực hiện hành động tương ứng.

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

switch (element.tagName) {
    case "A":
        console.log("Phần tử liên kết");
        break;
    case "IMG":
        console.log("Phần tử hình ảnh");
        break;
    case "BUTTON":
        console.log("Phần tử nút");
        break;
    default:
        console.log("Phần tử khác");
}

Điểm quan trọng là nên dùng cách kiểm tra này khi loại thẻ thực sự quyết định cách xử lý. Nếu chỉ cần xác định một phần tử có thuộc một nhóm chức năng nào đó hay không, có thể cân nhắc các cách kiểm tra khác phù hợp hơn.

Những trường hợp không nên phụ thuộc hoàn toàn vào tagName

tagName cho biết tên phần tử HTML nhưng không phản ánh vai trò nghiệp vụ của phần tử. Hai phần tử có cùng tên thẻ vẫn có thể đảm nhiệm những chức năng hoàn toàn khác nhau.

Vì vậy, không nên xây dựng toàn bộ logic ứng dụng chỉ dựa vào tên thẻ. Trong những trường hợp cần nhận diện theo chức năng, có thể kết hợp thêm class, id, thuộc tính dữ liệu hoặc trạng thái của phần tử để điều kiện kiểm tra rõ ràng hơn.

Lời kết

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