Phương thức hasAttribute() trong JavaScript

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

Chức năng của Phương thức hasAttribute() trong JavaScript

Phương thức hasAttribute() trong JavaScript dùng để kiểm tra một thuộc tính hiện tại có đang nằm trên một thẻ HTML hay không, nếu có sẽ trả về true, nếu không sẽ trả về false, thuộc tính bao gồm thuộc tính mặc định của HTML và thuộc tính bạn tự tạo.

Cú pháp của Phương thức hasAttribute() trong JavaScript

let ketqua = tenbien.hasAttribute("thuoctinh");

tenbien: Tên biến là phần tử HTML, thường dùng document.getElementById("giá trị id") để lấy.

thuoctinh: Thuộc tính cần kiểm tra xem có tồn tại trên phần tử HTML nào đó hay không.

ketqua: Trả về true nếu thuộc tính đó tồn tại, ngược lại trả về false.

Code Phương thức hasAttribute() trong JavaScript

document.getElementById("hinhid").hasAttribute("data-id");

<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;">
<script>
document.write("Thuộc tính id có trong phần tử HTML IMG id hinhid hay không: "+document.getElementById("hinhid").hasAttribute("id")+"<br>"); // Kết quả: true

document.write("Thuộc tính class có trong phần tử HTML IMG id hinhid hay không: "+document.getElementById("hinhid").hasAttribute("class")+"<br>"); // Kết quả: false

document.write("Thuộc tính data-id có trong phần tử HTML IMG id hinhid hay không: "+document.getElementById("hinhid").hasAttribute("data-id")+"<br>"); // Kết quả: true

document.write("Thuộc tính width có trong phần tử HTML IMG id hinhid hay không: "+document.getElementById("hinhid").hasAttribute("width")+"<br>"); // Kết quả: true

document.write("Thuộc tính alt có trong phần tử HTML IMG id hinhid hay không: "+document.getElementById("hinhid").hasAttribute("alt")+"<br>"); // Kết quả: true
</script>

Kết quả:

true
false
true
true
true

Chạy Thử

Khi Nào Nên Dùng hasAttribute() Trong JavaScript?

hasAttribute() phù hợp khi cần xác định một phần tử HTML có tồn tại một thuộc tính cụ thể hay không trước khi thực hiện bước xử lý tiếp theo. Cách kiểm tra này đặc biệt hữu ích với những phần tử có cấu trúc không đồng nhất hoặc thuộc tính được thêm vào tùy theo trạng thái.

Kiểm tra thuộc tính trước khi đọc hoặc thay đổi giá trị

Trước khi lấy hoặc thay đổi một thuộc tính, có thể dùng hasAttribute() để xác định thuộc tính đó đã tồn tại trên phần tử hay chưa. Điều này giúp đoạn mã thể hiện rõ ý định xử lý và tránh thực hiện các thao tác không cần thiết.

Chẳng hạn, khi xử lý các liên kết, chỉ những phần tử có thuộc tính target mới cần được kiểm tra hoặc cập nhật:

const link = document.querySelector('a');

if (link.hasAttribute('target')) {
    link.setAttribute('target', '_blank');
}

Cách làm này hữu ích khi thuộc tính có thể xuất hiện hoặc không xuất hiện tùy từng phần tử. Thay vì mặc định rằng thuộc tính luôn tồn tại, JavaScript sẽ kiểm tra trước rồi mới tiếp tục xử lý.

Phân biệt phần tử có thuộc tính và thuộc tính có giá trị

Một điểm quan trọng là hasAttribute() chỉ xác nhận thuộc tính có tồn tại, không kiểm tra giá trị của thuộc tính đó. Ví dụ, một phần tử có thuộc tính disabled dù giá trị của thuộc tính là chuỗi rỗng vẫn được xem là đang sở hữu thuộc tính này.

const button = document.querySelector('button');

if (button.hasAttribute('disabled')) {
    console.log('Nút đang có thuộc tính disabled');
}

Nếu mục tiêu là kiểm tra giá trị cụ thể, cần kết hợp thêm getAttribute() hoặc cách kiểm tra phù hợp với loại thuộc tính. Phân biệt hai nhu cầu này giúp tránh nhầm lẫn giữa việc có thuộc tính và việc thuộc tính đang chứa giá trị nào.

Tránh lỗi khi xử lý nhiều phần tử HTML

Trong các giao diện có nhiều phần tử cùng loại nhưng không cùng thuộc tính, hasAttribute() giúp xây dựng điều kiện xử lý an toàn hơn. JavaScript có thể kiểm tra từng phần tử và chỉ thực hiện thao tác cần thiết với những phần tử đáp ứng điều kiện.

const items = document.querySelectorAll('[data-action]');

items.forEach(item => {
    if (item.hasAttribute('data-action')) {
        console.log(item.getAttribute('data-action'));
    }
});

Cách tiếp cận này đặc biệt phù hợp với danh sách động, nội dung được tạo từ dữ liệu hoặc giao diện có nhiều trạng thái. Việc kiểm tra thuộc tính trước khi xử lý cũng giúp mã nguồn dễ đọc hơn và hạn chế những giả định không chính xác về cấu trúc HTML.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức hasAttribute() trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức hasAttribute() 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