Hướng dẫn javascript get element by data attribute - javascript get phần tử theo thuộc tính dữ liệu

Question

Mục lục #

Nhận tất cả các phần tử bằng thuộc tính dữ liệu bằng cách sử dụng JS
Nhận tất cả các thành phần DOM bằng cách kết hợp một phần thuộc tính dữ liệu

Nhận tất cả các phần tử bằng thuộc tính dữ liệu bằng cách sử dụng JS #

Để có được tất cả các thành phần DOM bằng thuộc tính dữ liệu, hãy sử dụng phương thức

Copied!
 Nội dung chính Show
 Mục lục #
Nhận tất cả các phần tử bằng thuộc tính dữ liệu bằng cách sử dụng JS #
Nhận tất cả các thành phần DOM bằng cách kết hợp một phần thuộc tính dữ liệu #
Làm cách nào để chọn một phần tử có thuộc tính dữ liệu?
Làm thế nào để bạn nhận được giá trị của thuộc tính dữ liệu trong JS?
Làm thế nào để tôi tìm thấy một yếu tố theo thuộc tính của nó?
Làm thế nào để bạn có được phần tử bằng thuộc tính dữ liệu React?
 
// ✅ Get all elements with `data-id` attribute
const elements1 = document.querySelectorAll('[data-id]');
console.log(elements1); // 👉️ [div, div]

// ✅ Get only DIV elements with `data-id` attribute
const elements2 = document.querySelectorAll('div[data-id]');
console.log(elements2); // 👉️ [div, div]

// ✅ Get only elements where data-id = box1
const elements3 = document.querySelectorAll(`[data-id="box1"]`);
console.log(elements3); // 👉️ [div]

1, ví dụ:
Copied!
// ✅ Get all elements with `data-id` attribute const elements1 = document.querySelectorAll('[data-id]'); console.log(elements1); // 👉️ [div, div] // ✅ Get only DIV elements with `data-id` attribute const elements2 = document.querySelectorAll('div[data-id]'); console.log(elements2); // 👉️ [div, div] // ✅ Get only elements where data-id = box1 const elements3 = document.querySelectorAll(`[data-id="box1"]`); console.log(elements3); // 👉️ [div]
2. Phương thức
Copied!
// ✅ Get all elements with `data-id` attribute const elements1 = document.querySelectorAll('[data-id]'); console.log(elements1); // 👉️ [div, div] // ✅ Get only DIV elements with `data-id` attribute const elements2 = document.querySelectorAll('div[data-id]'); console.log(elements2); // 👉️ [div, div] // ✅ Get only elements where data-id = box1 const elements3 = document.querySelectorAll(`[data-id="box1"]`); console.log(elements3); // 👉️ [div]
1 trả về
Copied!
// ✅ Get all elements with `data-id` attribute const elements1 = document.querySelectorAll('[data-id]'); console.log(elements1); // 👉️ [div, div] // ✅ Get only DIV elements with `data-id` attribute const elements2 = document.querySelectorAll('div[data-id]'); console.log(elements2); // 👉️ [div, div] // ✅ Get only elements where data-id = box1 const elements3 = document.querySelectorAll(`[data-id="box1"]`); console.log(elements3); // 👉️ [div]
4 chứa các phần tử phù hợp với bộ chọn được chỉ định.

Đây là mã

Copied!
// ✅ Get all elements with `data-id` attribute
const elements1 = document.querySelectorAll('[data-id]');
console.log(elements1); // 👉️ [div, div]

// ✅ Get only DIV elements with `data-id` attribute
const elements2 = document.querySelectorAll('div[data-id]');
console.log(elements2); // 👉️ [div, div]

// ✅ Get only elements where data-id = box1
const elements3 = document.querySelectorAll(`[data-id="box1"]`);
console.log(elements3); // 👉️ [div]

5 cho ví dụ này.

Copied!
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  head>

  <body>
    <div data-id="box1">Box 1div>
    <div data-id="box2">Box 2div>

    <script src="index.js">script>
  body>
html>

Và đây là mã JavaScript liên quan.

Copied!
// ✅ Get all elements with `data-id` attribute
const elements1 = document.querySelectorAll('[data-id]');
console.log(elements1); // 👉️ [div, div]

// ✅ Get only DIV elements with `data-id` attribute
const elements2 = document.querySelectorAll('div[data-id]');
console.log(elements2); // 👉️ [div, div]

// ✅ Get only elements where data-id = box1
const elements3 = document.querySelectorAll(`[data-id="box1"]`);
console.log(elements3); // 👉️ [div]

Chúng tôi đã chuyển các bộ chọn khác nhau cho phương thức tài liệu.QuerySelectorall để có được

Copied!
// ✅ Get all elements with `data-id` attribute
const elements1 = document.querySelectorAll('[data-id]');
console.log(elements1); // 👉️ [div, div]

// ✅ Get only DIV elements with `data-id` attribute
const elements2 = document.querySelectorAll('div[data-id]');
console.log(elements2); // 👉️ [div, div]

// ✅ Get only elements where data-id = box1
const elements3 = document.querySelectorAll(`[data-id="box1"]`);
console.log(elements3); // 👉️ [div]

4 chứa các phần tử DOM cụ thể.

Lưu ý rằng phương thức

Copied!
// ✅ Get all elements with `data-id` attribute
const elements1 = document.querySelectorAll('[data-id]');
console.log(elements1); // 👉️ [div, div]

// ✅ Get only DIV elements with `data-id` attribute
const elements2 = document.querySelectorAll('div[data-id]');
console.log(elements2); // 👉️ [div, div]

// ✅ Get only elements where data-id = box1
const elements3 = document.querySelectorAll(`[data-id="box1"]`);
console.log(elements3); // 👉️ [div]

1 trả về

Copied!
// ✅ Get all elements with `data-id` attribute
const elements1 = document.querySelectorAll('[data-id]');
console.log(elements1); // 👉️ [div, div]

// ✅ Get only DIV elements with `data-id` attribute
const elements2 = document.querySelectorAll('div[data-id]');
console.log(elements2); // 👉️ [div, div]

// ✅ Get only elements where data-id = box1
const elements3 = document.querySelectorAll(`[data-id="box1"]`);
console.log(elements3); // 👉️ [div]

4, không phải là một mảng. Nếu bạn cần chuyển đổi phản hồi thành một mảng, hãy chuyển nó sang phương thức

Copied!
// ✅ Get all elements with `data-id` attribute
const elements1 = document.querySelectorAll('[data-id]');
console.log(elements1); // 👉️ [div, div]

// ✅ Get only DIV elements with `data-id` attribute
const elements2 = document.querySelectorAll('div[data-id]');
console.log(elements2); // 👉️ [div, div]

// ✅ Get only elements where data-id = box1
const elements3 = document.querySelectorAll(`[data-id="box1"]`);
console.log(elements3); // 👉️ [div]

9.

Copied!



const arr = Array.from(document.querySelectorAll('[data-id]'));

Ví dụ đầu tiên cho thấy làm thế nào để có được tất cả các thành phần DOM có bộ thuộc tính

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

0.

Copied!
const elements1 = document.querySelectorAll('[data-id]');

Trong ví dụ thứ hai, chúng tôi thu hẹp mọi thứ xuống chỉ các yếu tố

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

1 có tập thuộc tính

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

0.

Copied!
const elements2 = document.querySelectorAll('div[data-id]');

Nếu DOM chứa bất kỳ phần tử

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

3 hoặc

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

4 nào có bộ thuộc tính

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

0, chúng sẽ không được đưa vào giá trị trả về của phương thức

Copied!
// ✅ Get all elements with `data-id` attribute
const elements1 = document.querySelectorAll('[data-id]');
console.log(elements1); // 👉️ [div, div]

// ✅ Get only DIV elements with `data-id` attribute
const elements2 = document.querySelectorAll('div[data-id]');
console.log(elements2); // 👉️ [div, div]

// ✅ Get only elements where data-id = box1
const elements3 = document.querySelectorAll(`[data-id="box1"]`);
console.log(elements3); // 👉️ [div]

1.

Ví dụ thứ ba chọn các phần tử có thuộc tính

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

0 được đặt thành

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

8.

Copied!



const elements3 = document.querySelectorAll(`[data-id="box1"]`);

Lưu ý rằng thuộc tính

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

0 phải được đặt thành chính xác

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

8.

Để chọn các phần tử dựa trên kết hợp một phần của một giá trị thuộc tính cụ thể, hãy cuộn xuống ví dụ tiếp theo.

Nhận tất cả các thành phần DOM bằng cách kết hợp một phần thuộc tính dữ liệu #

Để có được tất cả các phần tử bằng cách khớp một phần thuộc tính dữ liệu, hãy sử dụng phương thức

Copied!
// ✅ Get all elements with `data-id` attribute
const elements1 = document.querySelectorAll('[data-id]');
console.log(elements1); // 👉️ [div, div]

// ✅ Get only DIV elements with `data-id` attribute
const elements2 = document.querySelectorAll('div[data-id]');
console.log(elements2); // 👉️ [div, div]

// ✅ Get only elements where data-id = box1
const elements3 = document.querySelectorAll(`[data-id="box1"]`);
console.log(elements3); // 👉️ [div]

1 với bộ chọn phù hợp với thuộc tính dữ liệu có giá trị bắt đầu bằng, kết thúc bằng hoặc chứa một chuỗi cụ thể.

Copied!
// ✅ Get all where value of data-id starts with `bo`
const elements1 = document.querySelectorAll('[data-id^="bo"]');
console.log(elements1); // 👉️ [div, div]

// ✅ Get all where value of data-id ends with `ox1`
const elements2 = document.querySelectorAll('[data-id$="ox1"]');
console.log(elements2); // 👉️ [div]

// ✅ Get all where value of data-id contains with `box`
const elements3 = document.querySelectorAll('[data-id*="box"]');
console.log(elements3); // 👉️ [div, div]

Ví dụ đầu tiên chọn tất cả các thành phần DOM trong đó giá trị của thuộc tính

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

0 bắt đầu bằng

Copied!
const elements1 = document.querySelectorAll('[data-id]');

3.

Copied!
const elements1 = document.querySelectorAll('[data-id^="bo"]');

Bạn có thể quen thuộc với biểu tượng CARET

Copied!
const elements1 = document.querySelectorAll('[data-id]');

4, có cùng ý nghĩa khi được sử dụng trong các biểu thức thông thường.

Ví dụ thứ hai chọn tất cả các phần tử DOM trong đó giá trị của thuộc tính

Copied!



const arr = Array.from(document.querySelectorAll('[data-id]'));

0 kết thúc bằng

Copied!
const elements1 = document.querySelectorAll('[data-id]');

6.

Copied!
const elements2 = document.querySelectorAll('[data-id$="ox1"]');

Ví dụ thứ ba chọn tất cả các phần tử DOM trong đó giá trị của thuộc tính

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

0 chứa chuỗi

Copied!
const elements1 = document.querySelectorAll('[data-id]');

8.

Copied!
const elements3 = document.querySelectorAll('[data-id*="box"]');

Chuỗi

Copied!
const elements1 = document.querySelectorAll('[data-id]');

8 có thể được định vị ở bất cứ đâu trong giá trị của thuộc tính

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

0 cho điều kiện được đáp ứng.

Bạn cũng có thể tiền tố bộ chọn với một loại phần tử cụ thể mà bạn muốn khớp để thu hẹp kết quả.

Copied!
// ✅ Get all elements with `data-id` attribute
const elements1 = document.querySelectorAll('[data-id]');
console.log(elements1); // 👉️ [div, div]

// ✅ Get only DIV elements with `data-id` attribute
const elements2 = document.querySelectorAll('div[data-id]');
console.log(elements2); // 👉️ [div, div]

// ✅ Get only elements where data-id = box1
const elements3 = document.querySelectorAll(`[data-id="box1"]`);
console.log(elements3); // 👉️ [div]

0

Ví dụ chỉ chọn các thành phần

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

1 có tập thuộc tính

Copied!
const arr = Array.from(document.querySelectorAll('[data-id]'));

0 và giá trị của thuộc tính bắt đầu bằng

Copied!
const elements1 = document.querySelectorAll('[data-id]');

3.

Làm cách nào để chọn một phần tử có thuộc tính dữ liệu?

[Thuộc tính = Giá trị giá trị]: Nó chọn các phần tử với một thuộc tính và giá trị được chỉ định.[Thuộc tính ~ = Giá trị giá trị]: Nó chọn các phần tử có giá trị thuộc tính chứa một từ được chỉ định.[Thuộc tính | = Giá trị giá trị]: Nó chọn các phần tử với thuộc tính được chỉ định bắt đầu với giá trị được chỉ định.: It selects the elements with a specified attribute and value. [attribute~=”value”]: It selects the elements with an attribute value which contains a specified word. [attribute|=”value”]: It selects the elements with the specified attribute which starts with the specified value.

Làm thế nào để bạn nhận được giá trị của thuộc tính dữ liệu trong JS?

phương thức getAttribution () để có được các thuộc tính dữ liệu của một phần tử. to get the data attributes of an element.

Làm thế nào để tôi tìm thấy một yếu tố theo thuộc tính của nó?

Sử dụng phương thức QuerySelector () để có phần tử DOM theo thuộc tính, ví dụ:tài liệu.Truy vấnSelector ('[data-id = "first"]').Phương thức QuerySelector sẽ trả về phần tử đầu tiên trong tài liệu phù hợp với thuộc tính được chỉ định., e.g. document. querySelector('[data-id="first"]') . The querySelector method will return the first element in the document that matches the specified attribute.

Làm thế nào để bạn có được phần tử bằng thuộc tính dữ liệu React?

Một phương pháp khác được mô tả dưới đây với các ví dụ mã có thể được sử dụng để giải quyết cùng một vấn đề React Nhận thuộc tính dữ liệu từ phần tử.Kiểm tra const id = e.target.getAttribution ("data-id");// Thay thế cho getAttribution const id = e.

Test

const id = e. target. getAttribute("data-id"); //alternate to getAttribute const id = e.

programming javascript CSS data attribute Data attribute js querySelector attribute Document get element

Hướng dẫn javascript get element by data attribute - javascript get phần tử theo thuộc tính dữ liệu

Mục lục #

Nhận tất cả các phần tử bằng thuộc tính dữ liệu bằng cách sử dụng JS #

Nhận tất cả các thành phần DOM bằng cách kết hợp một phần thuộc tính dữ liệu #

Làm cách nào để chọn một phần tử có thuộc tính dữ liệu?

Làm thế nào để bạn nhận được giá trị của thuộc tính dữ liệu trong JS?

Làm thế nào để tôi tìm thấy một yếu tố theo thuộc tính của nó?

Làm thế nào để bạn có được phần tử bằng thuộc tính dữ liệu React?

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