JavaScript Reference - Tập 15: HTML Attributes - Làm chủ thuộc tính phần tử

Table of contents

1. NamedNodeMap là gì?

Khi bạn truy cập element.attributes, trình duyệt trả về một NamedNodeMap. Đây là một tập hợp không có thứ tự của các đối tượng Attr.

• Mặc dù giống mảng nhưng nó không phải là mảng (Array).
• Bạn có thể truy cập bằng tên hoặc bằng chỉ số (Index).

2. Thuộc tính của đối tượng Attr

Mỗi đối tượng thuộc tính (Attr) có các thông tin cơ bản sau:

• name: Tên của thuộc tính (ví dụ: “src”, “type”).
• value: Giá trị của thuộc tính đó.
• specified: Trả về true nếu thuộc tính được thiết lập rõ ràng trong mã HTML.

3. Các phương thức của NamedNodeMap

Để quản lý danh sách thuộc tính của một phần tử, bạn dùng các phương thức sau:

• getNamedItem(name): Lấy một đối tượng Attr theo tên.
• setNamedItem(node): Thêm hoặc thay thế một đối tượng Attr vào danh sách.
• removeNamedItem(name): Xóa một thuộc tính khỏi danh sách.
• item(index): Lấy đối tượng Attr tại vị trí chỉ định (bắt đầu từ 0).
• length: Trả về tổng số lượng thuộc tính mà phần tử đó có.

4. Ví dụ thực tế: Liệt kê tất cả thuộc tính của một thẻ

const btn = document.getElementById("myBtn");
let text = "";
for (let i = 0; i < btn.attributes.length; i++) {
  text += btn.attributes[i].name + " = " + btn.attributes[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Lời kết Tập 15

Việc hiểu sâu về cách quản lý Attributes giúp bạn tối ưu hóa việc xử lý dữ liệu động trên giao diện web. Trong Tập 16, chúng ta sẽ bước vào thế giới sôi động nhất của DOM: Event Objects Reference - Trái tim của mọi tương tác người dùng.

Hẹn gặp lại các bạn!