Hướng dẫn how do you select data in javascript? - làm thế nào để bạn chọn dữ liệu trong javascript?

Question

document.querySelectorAll('data-foo')

Để có được danh sách tất cả các yếu tố có dữ liệu thuộc tính-foo

Nội dung chính Show

Chọn phần tử đơn lẻ
Chọn nhiều yếu tố
Cú pháp HTML
Truy cập JavaScript
Truy cập CSS
Vấn đề
Phương thức dữ liệu trong JavaScript là gì?
Làm thế nào tìm nạp thuộc tính dữ liệu trong JavaScript?
Thuộc tính dữ liệu trong JavaScript là gì?
Phương pháp nào được sử dụng để chọn phần tử HTML trong JavaScript?

Nếu bạn muốn lấy phần tử với thuộc tính dữ liệu có một số giá trị cụ thể, ví dụ

Và tôi muốn đưa Div với dữ liệu-foo được đặt thành "2"

document.querySelector('[data-foo="2"]')

Nhưng ở đây có sự thay đổi ... Điều gì sẽ xảy ra nếu tôi muốn khớp với giá trị Attirubte dữ liệu với một số giá trị của biến? Ví dụ: nếu tôi muốn lấy các phần tử trong đó thuộc tính dữ liệu-foo được đặt thành iwhat if I want to match the data attirubte value with some variable's value? For example, if I want to get the elements where data-foo attribute is set to i

var i=2;

Vì vậy, bạn có thể tự động chọn phần tử có phần tử dữ liệu cụ thể bằng cách sử dụng các mẫu chữ

document.querySelector(`[data-foo="${i}"]`)

Lưu ý ngay cả khi bạn không ghi giá trị trong chuỗi, nó sẽ được chuyển đổi thành chuỗi như nếu tôi viết

và sau đó kiểm tra phần tử trong công cụ nhà phát triển Chrome, phần tử sẽ được hiển thị như bên dưới

Bạn cũng có thể xác minh chéo bằng cách viết mã dưới đây trong bảng điều khiển

console.log(typeof document.querySelector(`[data-foo]="${i}"`).dataset('dataFoo'))

Tại sao tôi đã viết

6 mặc dù thuộc tính là các thuộc tính dữ liệu lý do dữ liệu-foo được chuyển đổi thành thuộc tính Camelcase

Tôi đã giới thiệu bên dưới các liên kết:

Mdn: data-*
MDN: Sử dụng các thuộc tính dữ liệu

Trong hướng dẫn này, chúng tôi sẽ tìm hiểu cách chọn/truy cập phần tử HTML bằng thuộc tính dữ liệu trong JavaScript.

Hãy xem xét, chúng tôi có các phần tử HTML với các thuộc tính dữ liệu.

<div data-id="1">First divdiv>
<div data-id="2">First divdiv>
<h2 data-user="poppy"> Poppyh2>

Bây giờ, chúng ta cần chọn các phần tử trên bằng thuộc tính dữ liệu trong JavaScript.

Chọn phần tử đơn lẻ

Để chọn phần tử duy nhất, chúng ta cần sử dụng phương thức

7 bằng cách chuyển

8 làm đối số.

Example:

const user = document.querySelector("[data-user='poppy']");

console.log(user);

Chọn nhiều yếu tố

Để chọn nhiều phần tử có cùng tên thuộc tính

9, chúng ta cần sử dụng phương thức

document.querySelector('[data-foo="2"]')

0 bằng cách truyền

document.querySelector('[data-foo="2"]')

1 làm đối số.

Example:

0

Trong ví dụ trên, phương thức

document.querySelector('[data-foo="2"]')

2 trả về nhiều phần tử trong một mảng để truy cập vào từng phần tử chúng ta cần lặp qua nó.

1

HTML được thiết kế với khả năng mở rộng trong tâm trí đối với dữ liệu nên được liên kết với một yếu tố cụ thể nhưng không cần có bất kỳ ý nghĩa xác định nào.

document.querySelector('[data-foo="2"]')

3 Các thuộc tính cho phép chúng tôi lưu trữ thêm thông tin về các yếu tố HTML tiêu chuẩn, ngữ nghĩa mà không có các bản hack khác như thuộc tính không chuẩn hoặc các thuộc tính bổ sung trên DOM.

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

document.querySelector('[data-foo="2"]')

4 là thuộc tính dữ liệu. Giả sử bạn có một bài viết và bạn muốn lưu trữ một số thông tin bổ sung không có bất kỳ đại diện trực quan nào. Chỉ cần sử dụng các thuộc tính

9 cho điều đó:

2

Truy cập JavaScript

Đọc 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

document.querySelector('[data-foo="2"]')

6 với tên HTML đầy đủ của chúng để đọc chúng, nhưng tiêu chuẩn xác định một cách đơn giản hơn: A

document.querySelector('[data-foo="2"]')

7 bạn có thể đọc qua thuộc tính

document.querySelector('[data-foo="2"]')

8.

Để nhận thuộc tính

9 thông qua đối tượng

document.querySelector('[data-foo="2"]')

8, hãy lấy thuộc tính bằng một phần của tên thuộc tính sau

document.querySelector('[data-foo="2"]')

4 (lưu ý rằng các dấu gạch ngang được chuyển đổi thành Camelcase).

3

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

var i=2;

2 sẽ thay đổi thuộc tính đó thành

var i=2;

3.

Truy cập CSS

Lưu ý rằng, vì các thuộc tính dữ liệu là các 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 cha mẹ trên bài viết, bạn có thể sử dụng nội dung được tạo trong CSS với hàm

var i=2;

4:

4

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

5

Bạn có thể thấy tất cả điều này làm việc cùng nhau trong ví dụ JSBIN này.

Các thuộc tính dữ liệu cũng có thể được lưu trữ để chứa thông tin liên tục thay đổi, như điểm số trong một trò chơi. Sử dụng Truy cập CSS và Truy cập JavaScript ở đây, điều này cho phép bạn xây dựng một số hiệu ứng tiện lợi mà không phải viết các thói quen hiển thị của riêng bạn. Xem Screencast này để biết ví dụ sử dụng chuyển đổi nội dung và CSS được tạo (ví dụ JSBIN).

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

Vấn đề

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

Xem thêm

Bài viết này được điều chỉnh từ việc sử dụng các thuộc tính dữ liệu trong JavaScript và CSS trên hacks.mozilla.org.
Các thuộc tính tùy chỉnh cũng được hỗ trợ trong SVG 2; Xem
```
var i=2;
```
5 và
```
document.querySelector('[data-foo="2"]')
```
3 để biết thêm thông tin.
Cách sử dụng các thuộc tính dữ liệu HTML (sitePoint)

Phương thức dữ liệu trong JavaScript là gì?

Phương thức dữ liệu () được sử dụng để đính kèm và lấy dữ liệu từ các phần tử đã chọn. Nó là một phương pháp sẵn có trong jQuery. Chúng ta có thể sử dụng phương thức removeData () để xóa dữ liệu.used to attach and get data from the selected elements. It is an inbuilt method in JQuery. We can use the removeData() method to remove the data.

Làm thế nào tìm nạp thuộc tính dữ liệu trong JavaScript?

Cách tiếp cận: Đầu tiên, chọn phần tử có thuộc tính dữ liệu.Chúng tôi có thể sử dụng thuộc tính Dataset để có quyền truy cập vào các thuộc tính dữ liệu hoặc sử dụng.phương thức getAttribution () để chọn chúng bằng cách gõ cụ thể tên của chúng.use the dataset property to get access to the data attributes or use the . getAttribute() method to select them by specifically typing their names.

Thuộc tính dữ liệu trong JavaScript là gì?

Thuộc tính dữ liệu-* cho chúng ta khả năng nhúng các thuộc tính dữ liệu tùy chỉnh trên tất cả các phần tử HTML.Dữ liệu được lưu trữ (tùy chỉnh) sau đó có thể được sử dụng trong JavaScript của trang để tạo trải nghiệm người dùng hấp dẫn hơn (mà không có bất kỳ cuộc gọi AJAX hoặc truy vấn cơ sở dữ liệu phía máy chủ nào).gives us the ability to embed custom data attributes on all HTML elements. The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).

Phương pháp nào được sử dụng để chọn phần tử HTML trong JavaScript?

Phương thức GetEuityByID Cách phổ biến nhất để truy cập phần tử HTML là sử dụng ID của phần tử.Trong ví dụ trên phương thức getEuityById đã sử dụng id = "demo" để tìm phần tử.getElementById Method The most common way to access an HTML element is to use the id of the element. In the example above the getElementById method used id="demo" to find the element.

programming javascript Dataset JS CSS data attribute Element find Data URL HTML querySelector attribute

Hướng dẫn how do you select data in javascript? - làm thế nào để bạn chọn dữ liệu trong javascript?

Chọn phần tử đơn lẻ

Chọn nhiều yếu tố

Cú pháp HTML

Truy cập JavaScript

Truy cập CSS

Vấn đề

Xem thêm

Phương thức dữ liệu trong JavaScript là gì?

Làm thế nào tìm nạp thuộc tính dữ liệu trong JavaScript?

Thuộc tính dữ liệu trong JavaScript là gì?

Phương pháp nào được sử dụng để chọn phần tử HTML trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội