Một trong những cách tốt nhất để lưu trữ dữ liệu trong HTML là với các thuộc tính dữ liệu. Các thuộc tính dữ liệu này có thể được sử dụng để thực hiện một số điều khá thú vị trong CSS mà không cần JavaScript, như đã thấy trong bài viết này, nhưng các thuộc tính dữ liệu hữu ích nhất khi được kết hợp với JavaScript. Trong bài viết này, tôi sẽ hướng dẫn bạn chính xác cách sử dụng các thuộc tính dữ liệu trong JavaScript và điều gì khiến chúng trở nên mạnh mẽ như vậy.
Giới thiệu thuộc tính dữ liệu
Để bắt đầu nói về thuộc tính dữ liệu, trước tiên chúng ta cần có một số HTML có thuộc tính dữ liệu. Để tạo một thuộc tính dữ liệu trong HTML, chúng ta chỉ cần thêm một thuộc tính tùy chỉnh vào phần tử HTML bắt đầu bằng
const div = document.getElementById["test-div"]
console.log[div.dataset]
3
Đọc thuộc tính dữ liệu
Bây giờ chúng tôi có một div với ba thuộc tính dữ liệu tùy chỉnh. Bây giờ, hãy chuyển sang JavaScript để xem cách chúng tôi truy cập các thuộc tính dữ liệu này
const div = document.getElementById["test-div"]
console.log[div.dataset]
Thuộc tính
const div = document.getElementById["test-div"]
console.log[div.dataset]
4 trên một phần tử sẽ trả về một const div = document.getElementById["test-div"]
console.log[div.dataset]
5 về cơ bản chỉ là một đối tượng chứa tất cả các thuộc tính dữ liệu tùy chỉnh của một phần tử. const div = document.getElementById["test-div"]
console.log[div.dataset]
4 của chúng tôi trông như thế này{
active: ""
firstName: "Kyle"
lastName: "Cook"
}
Bạn sẽ nhận thấy hai điều thú vị về điều này
Đầu tiên, tất cả tài sản của chúng tôi được chuyển đổi từ chuồng rắn,
const div = document.getElementById["test-div"]
console.log[div.dataset]
7, sang chuồng lạc đà, const div = document.getElementById["test-div"]
console.log[div.dataset]
8. Điều này là do trong các thuộc tính đối tượng JavaScript chủ yếu được viết dưới dạng trường hợp lạc đà, vì vậy điều này chỉ giúp làm việc với đối tượng JavaScript dễ dàng hơn nhiềuThứ hai, tài sản
const div = document.getElementById["test-div"]
console.log[div.dataset]
9 có giá trị là {
active: ""
firstName: "Kyle"
lastName: "Cook"
}
0. Điều này là do bất kỳ thuộc tính dữ liệu nào không có giá trị đều được coi là có một chuỗi trống làm giá trị của nóBây giờ để truy cập một thuộc tính dữ liệu riêng lẻ, chúng ta chỉ cần truy cập nó giống như một thuộc tính trên một đối tượng vì
const div = document.getElementById["test-div"]
console.log[div.dataset]
4 chỉ là một đối tượngconst div = document.getElementById["test-div"]
console.log[div.dataset.firstName]
// Kyle
console.log[div.dataset.lastName]
// Cook
Viết thuộc tính dữ liệu
Để tạo một thuộc tính dữ liệu mới trong JavaScript, chúng ta chỉ cần thêm một thuộc tính mới vào đối tượng
const div = document.getElementById["test-div"]
console.log[div.dataset]
4 với một giá trịconst div = document.getElementById["test-div"]
div.dataset.test = "Hi"
console.log[div.dataset.test]
// Hi
Điều này sẽ cập nhật đối tượng tập dữ liệu và HTML của chúng tôi, có nghĩa là HTML của chúng tôi sẽ trông như thế này
Cập nhật thuộc tính dữ liệu
Giả sử bây giờ chúng ta muốn cập nhật giá trị của một thuộc tính dữ liệu. Điều này cực kỳ dễ dàng vì nó hoạt động giống như một đối tượng bình thường. Chúng tôi chỉ cần đặt giá trị của thuộc tính
const div = document.getElementById["test-div"]
console.log[div.dataset]
4 thành giá trị mới và nó sẽ cập nhật HTML cho chúng tôiconst div = document.getElementById["test-div"]
div.dataset.firstName = "Sally"
console.log[div.dataset.firstName]
// Sally
Điều này sẽ cập nhật đối tượng tập dữ liệu và HTML của chúng tôi, có nghĩa là HTML của chúng tôi sẽ trông như thế này
Xóa thuộc tính dữ liệu
Xóa thuộc tính dữ liệu hơi khác một chút vì chúng ta thực sự cần xóa thuộc tính khỏi đối tượng của mình. Điều này là do nếu chúng tôi thử đặt giá trị thành
{
active: ""
firstName: "Kyle"
lastName: "Cook"
}
4 hoặc {
active: ""
firstName: "Kyle"
lastName: "Cook"
}
5 thì đối tượng const div = document.getElementById["test-div"]
console.log[div.dataset]
4 sẽ vẫn có tham chiếu đến thuộc tính đó với giá trị đó là {
active: ""
firstName: "Kyle"
lastName: "Cook"
}
4 hoặc {
active: ""
firstName: "Kyle"
lastName: "Cook"
}
5 và sẽ đặt giá trị của thuộc tính dữ liệu HTML của chúng tôi thành chuỗi {
active: ""
firstName: "Kyle"
lastName: "Cook"
}
5 hoặc {
active: ""
firstName: "Kyle"
lastName: "Cook"
}
4Để xóa một phần tử chúng ta cần sử dụng từ khóa
const div = document.getElementById["test-div"]
console.log[div.dataset.firstName]
// Kyle
console.log[div.dataset.lastName]
// Cook
1 để xóa hoàn toàn phần tử đó khỏi đối tượngconst div = document.getElementById["test-div"]
delete div.dataset.active
console.log[div.dataset.active]
// undefined
Điều này sẽ cập nhật đối tượng tập dữ liệu và HTML của chúng tôi, có nghĩa là HTML của chúng tôi sẽ trông như thế này
Ví dụ thế giới thực
Bây giờ hãy kết hợp tất cả những điều này thành một ví dụ thực tế. Giả sử bạn có HTML sau
const div = document.getElementById["test-div"]
console.log[div.dataset]
0Bạn muốn viết JavaScript để nút đầu tiên mở phương thức 1 và nút thứ hai mở phương thức 2, nhưng chúng tôi muốn thực hiện việc này theo cách có thể tái sử dụng, vì vậy nếu chúng tôi thêm nút thứ ba để mở phương thức mới thì chúng tôi không cần
Điều này thoạt nghe có vẻ thực sự khó khăn, nhưng về cơ bản, tất cả những gì chúng ta cần là một cách nào đó để liên kết từng nút với phương thức tương ứng của chúng trong HTML. Đây là nơi các thuộc tính dữ liệu xuất hiện
Chúng tôi có thể đặt thuộc tính dữ liệu tùy chỉnh trên mỗi nút tham chiếu phương thức mà chúng được liên kết đến. Trong trường hợp của chúng tôi, chúng tôi có thể sử dụng id của từng phương thức làm tài liệu tham khảo của chúng tôi
const div = document.getElementById["test-div"]
console.log[div.dataset]
1Vì vậy, bây giờ chúng ta có một cách để truy cập id của phương thức được liên kết với từng nút bên trong JavaScript
const div = document.getElementById["test-div"]
console.log[div.dataset]
2Trong đoạn mã trên, chúng tôi đang chọn tất cả các phần tử có chứa thuộc tính
const div = document.getElementById["test-div"]
console.log[div.dataset.firstName]
// Kyle
console.log[div.dataset.lastName]
// Cook
2 tùy chỉnh của chúng tôi. Sau đó, chúng tôi sẽ lặp lại chúng và thêm trình xử lý sự kiện nhấp chuột vào từng cái. Bên trong trình lắng nghe sự kiện này, chúng tôi đang sử dụng id phương thức để lấy liên kết phương thức tới nút đó và thêm lớp hiển thị để nó hiển thịMã này cũng linh hoạt vì nó sẽ lấy bất kỳ phần tử nào có thuộc tính
const div = document.getElementById["test-div"]
console.log[div.dataset.firstName]
// Kyle
console.log[div.dataset.lastName]
// Cook
2 tùy chỉnh. Điều này có nghĩa là nếu chúng tôi thêm một nút mới tham chiếu một phương thức mới, chúng tôi sẽ không cần viết thêm bất kỳ JavaScript nàoPhần kết luận
Thuộc tính dữ liệu trong JavaScript cực kỳ hữu ích. Chúng cho phép bạn viết mã cực kỳ linh hoạt, điều đó có nghĩa là bạn có thể dành nhiều thời gian hơn để viết HTML cho dự án của mình và bớt lo lắng về việc viết trình xử lý sự kiện tùy chỉnh cho mỗi phần tử mới mà bạn thêm vào