Nhận dữ liệu JavaScript thuộc tính

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

<div
  id="test-div"
  data-first-name="Kyle"
  data-last-name="Cook"
  data-active
>div>

Đọ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ều

Thứ 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ượng

const 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

<div
  id="test-div"
  data-test="Hi"
  data-first-name="Kyle"
  data-last-name="Cook"
  data-active
>div>

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ôi

const 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

<div
  id="test-div"
  data-first-name="Sally"
  data-last-name="Cook"
  data-active
>div>

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ượng

const 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

<div
  id="test-div"
  data-first-name="Sally"
  data-last-name="Cook"
>div>

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)

0

Bạ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)

1

Vì 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)

2

Trong đ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ào

Phầ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

Thuộc tính get trong JavaScript là gì?

Làm cách nào để lấy id thuộc tính trong JavaScript?

Làm cách nào để nhận giá trị thuộc tính tùy chỉnh trong JavaScript?

Làm cách nào bạn có thể truy xuất giá trị thuộc tính của phần tử?