Thuộc tính attributes trong JavaScript

• Bùi Tấn Lực
• 969
• 16/09/2025

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

Thuộc tính attributes trong JavaScript dùng để lấy tên các thuộc tính có trên phần tử HTML và số thuộc tính có trên phần tử HTML, ngoài ra còn có các phương thức để tương tác với thuộc tính như: lấy giá trị thuộc tính ta dùng phương thức getAttribute(), thay đổi giá trị thuộc tính sử dụng phương thức setAttribute().

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

let ketqua = tenbien.attributes;

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

ketqua: Trả về danh sách các thuộc tính và giá trị của thuộc tính.

Code Thuộc tính attributes trong JavaScript

let list = document.getElementById("hinhid").attributes;

<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" style="display: block;clear: both;margin-bottom: 10px;">
<script>
let hinhid = document.getElementById("hinhid");
let list = document.getElementById("hinhid").attributes;
for (let i = 0; i < list.length; i++) {
  var thuoctinh = list[i].name;
  document.write(thuoctinh+": "+hinhid.getAttribute(thuoctinh)+"<br>");
}
</script>

Kết quả:

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
style: display: block;clear: both;margin-bottom: 10px;

Chạy Thử

Cách duyệt và kiểm tra thuộc tính với attributes trong JavaScript

Đối tượng attributes cho phép JavaScript tiếp cận tập hợp các thuộc tính đang được khai báo trên một phần tử HTML. Khi cần kiểm tra nhiều thuộc tính cùng lúc, việc duyệt qua tập hợp này sẽ thuận tiện hơn so với việc kiểm tra từng tên thuộc tính riêng lẻ.

Duyệt toàn bộ thuộc tính bằng vòng lặp

Có thể kết hợp attributes với vòng lặp để lấy lần lượt từng thuộc tính của phần tử. Mỗi phần tử trong tập hợp chứa thông tin về tên và giá trị của thuộc tính tương ứng.

const element = document.querySelector("#san-pham");

for (const attribute of element.attributes) {
    console.log(attribute.name, attribute.value);
}

Cách này phù hợp khi cần kiểm tra nhanh toàn bộ dữ liệu thuộc tính, chẳng hạn xác định một phần tử đang có những thuộc tính nào trước khi thực hiện xử lý tiếp theo.

Kiểm tra tên và giá trị của từng thuộc tính

Mỗi thuộc tính trong attributes có thể được đọc thông qua name và value. name cho biết tên thuộc tính, còn value chứa giá trị mà thuộc tính đang mang.

const element = document.querySelector("#san-pham");

for (const attribute of element.attributes) {
    if (attribute.name === "data-id") {
        console.log("Mã sản phẩm:", attribute.value);
    }
}

Cách kiểm tra này hữu ích khi cần tìm một thuộc tính cụ thể trong tập hợp mà không muốn thay đổi cấu trúc của phần tử.

Phân biệt attributes với thuộc tính DOM

attributes phản ánh các thuộc tính được gắn trên phần tử HTML, trong khi property của DOM là các thuộc tính JavaScript được trình duyệt cung cấp cho đối tượng phần tử. Hai khái niệm có thể liên quan nhưng không phải lúc nào cũng có giá trị giống nhau.

const input = document.querySelector("#email");

console.log(input.attributes);
console.log(input.value);

Trong ví dụ trên, attributes dùng để xem các thuộc tính HTML của phần tử, còn value là một property của đối tượng DOM. Phân biệt hai cách tiếp cận này giúp tránh đọc nhầm dữ liệu khi xử lý phần tử bằng JavaScript.

Lời kết

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