Nhận dữ liệu thuộc tính JavaScript
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. Show
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 thuộc tính dữ liệu trong HTML, chúng ta chỉ cần thêm thuộc tính tùy chỉnh vào thành phần HTML bắt đầu bằng 3
Đọc thuộc tính dữ liệuBâ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
Thuộc tính 4 trên một phần tử sẽ trả về một 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ử. 4 của chúng tôi trông như thế này
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ừ vỏ rắn, 7, sang vỏ lạc đà, 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 9 có giá trị là 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ì 4 chỉ là một đối tượng 2Viế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 4 với một giá trị 4Đ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 5Cập nhật thuộc tính dữ liệuGiả 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 4 thành giá trị mới và nó sẽ cập nhật HTML cho chúng tôi 7Đ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 8Xóa thuộc tính dữ liệuXó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 4 hoặc 5 thì đối tượng 4 sẽ vẫn có tham chiếu đến thuộc tính đó với giá trị đó là 4 hoặc 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 5 hoặc 4Để xóa một phần tử chúng ta cần sử dụng từ khóa 21 để xóa hoàn toàn phần tử đó khỏi đối tượng 7Đ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 8Ví dụ thế giới thựcBâ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 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 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 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 22 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 22 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ậnThuộ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 Làm cách nào để lấy giá trị thuộc tính id dữ liệu trong JavaScript?Cách lấy thuộc tính data-id . Phương thức attr(). Để lấy nội dung của thuộc tính data-id, hãy sử dụng phương thức attr(), phương thức này sẽ trả về một chuỗi. $(cái này). attr("data-id") // trả về chuỗi "457". Phương thức dữ liệu (). Trong trường hợp jQuery >= 1. 4. 3, bạn có thể sử dụng phương thức data(). . Các phương thức attr() và data(). Các Làm cách nào để lấy tất cả các thuộc tính của một phần tử trong JavaScript?Để lấy tất cả các thuộc tính của phần tử DOM. . Sử dụng phương thức getAttributeNames() để lấy một mảng tên thuộc tính của phần tử Sử dụng phương thức reduce() để lặp lại mảng Trên mỗi lần lặp lại, hãy thêm một cặp khóa/giá trị mới chứa tên và giá trị của thuộc tính Thuộc tính get trong JavaScript là gì?Phương thức getAttribute() của giao diện Phần tử trả về giá trị của một thuộc tính được chỉ định trên phần tử . Nếu thuộc tính đã cho không tồn tại, giá trị được trả về sẽ là null hoặc "" (chuỗi rỗng); .
Làm cách nào bạn có thể truy xuất giá trị thuộc tính của phần tử?Phương thức HTML DOM getAttribute() được sử dụng để lấy giá trị thuộc tính của phần tử. Bằng cách chỉ định tên của thuộc tính, nó có thể lấy giá trị của phần tử đó. Để lấy giá trị từ các thuộc tính không chuẩn, chúng ta có thể sử dụng phương thức getAttribute(). |