Cách nhúng dữ liệu tùy chỉnh (custom data attributes) trên mọi phần tử HTML?

Sử dụng thuộc tính data-* để lưu trữ dữ liệu riêng tư trên bất kỳ phần tử HTML nào. Tên thuộc tính bắt đầu bằng data-, chỉ chứa chữ thường, số, gạch ngang, chấm.

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <script>
      function display(rank) {
        var myRank = rank.getAttribute("data-rank-type");
        alert("Hạng " + rank.innerHTML + " có " + myRank + " điểm.");
      }
    </script>
  </head>
  <body>
    <h1>Hạng và Điểm</h1>
    <p>Nhấn vào hạng để xem chi tiết:</p>
    <ul>
      <li onclick="display(this)" id="fifth" data-rank-type="500">Thứ năm</li>
      <li onclick="display(this)" id="sixth" data-rank-type="600">Thứ sáu</li>
    </ul>
  </body>
</html>

Truy cập bằng JavaScript

• element.dataset.rankType (camelCase tự động chuyển từ data-rank-type)
• element.getAttribute('data-rank-type')
• element.setAttribute('data-rank-type', '700')

Quy tắc đặt tên

• Bắt đầu bằng data-
• Không chứa chữ HOA (sẽ chuyển thành chữ thường)
• Dùng kebab-case: data-user-id, data-api-key
• Không dùng XML namespace (xml:...)

Ứng dụng thực tế

• Lưu ID database, trạng thái UI, cấu hình component
• Truyền dữ liệu từ server-side render sang client-side JS
• CSS attribute selector: [data-active="true"] { ... }