Cập nhật dữ liệu trong javascript

cú pháp HTML

Cú pháp đơn giản. Bất kỳ thuộc tính nào trên bất kỳ phần tử nào có tên thuộc tính bắt đầu bằng data- đều là thuộc tính dữ liệu. Giả sử bạn có một bài báo và bạn muốn lưu trữ một số thông tin bổ sung không có bất kỳ hình ảnh đại diện nào. Chỉ cần sử dụng thuộc tính data cho điều đó

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  …
article>

truy cập JavaScript

Việc đọc giá trị của các thuộc tính này trong JavaScript cũng rất đơn giản. Bạn có thể sử dụng

const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

Để lấy thuộc tính data thông qua đối tượng

const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

Mỗi thuộc tính là một chuỗi và có thể được đọc và viết. Trong trường hợp trên, cài đặt

const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

quyền truy cập CSS

Lưu ý rằng, vì thuộc tính dữ liệu là thuộc tính HTML đơn giản, bạn thậm chí có thể truy cập chúng từ CSS. Ví dụ: để hiển thị dữ liệu gốc trên bài viết, bạn có thể sử dụng nội dung được tạo trong CSS bằng hàm

const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

article::before {
  content: attr(data-parent);
}

Bạn cũng có thể sử dụng bộ chọn thuộc tính trong CSS để thay đổi kiểu theo dữ liệu

article[data-columns="3"] {
  width: 400px;
}
article[data-columns="4"] {
  width: 600px;
}

Bạn có thể thấy tất cả điều này hoạt động cùng nhau trong ví dụ về JSBin này

Thuộc tính dữ liệu cũng có thể được lưu trữ để chứa thông tin thay đổi liên tục, chẳng hạn như điểm số trong trò chơi. Sử dụng bộ chọn CSS và truy cập JavaScript ở đây, điều này cho phép bạn tạo một số hiệu ứng tiện lợi mà không cần phải viết quy trình hiển thị của riêng mình. Xem bản ghi màn hình này để biết ví dụ sử dụng nội dung được tạo và chuyển tiếp CSS (ví dụ về JSBin)

Giá trị dữ liệu là chuỗi. Các giá trị số phải được trích dẫn trong bộ chọn để kiểu dáng có hiệu lực

Vấn đề

Không lưu trữ nội dung có thể nhìn thấy và truy cập được trong các thuộc tính dữ liệu vì công nghệ hỗ trợ có thể không truy cập được chúng. Ngoài ra, trình thu thập thông tin tìm kiếm có thể không lập chỉ mục các giá trị của thuộc tính dữ liệu