Nhận phần tử theo thuộc tính JavaScript

Trong hướng dẫn này, bạn sẽ tìm hiểu cách Javascript lấy phần tử theo thuộc tính của phần tử. Bạn sẽ chọn các phần tử dựa trên thuộc tính và giá trị thuộc tính của chúng

Nói chung, chúng tôi chọn các phần tử HTML bằng id hoặc tên lớp của chúng. Tuy nhiên, đôi khi chúng ta cần chọn các phần tử dựa trên các thuộc tính của chúng

Ví dụ: chúng ta cần chọn một thành phần hình ảnh dựa trên giá trị thuộc tính src của chúng hoặc chọn một thành phần liên kết dựa trên giá trị src của chúng. . src của chúng. . src của chúng. . src của chúng. . href attribute value.

Chọn phần tử theo thuộc tính

Để chọn các thành phần dựa trên thuộc tính của chúng, hãy sử dụng phương thức querySelector của tài liệu object. It uses CSS selectors to select elements.

Phần tử có thể được chọn dựa trên id , lớp or any other attribute.

Ví dụ: nếu bạn muốn chọn một phần tử có thuộc tính title thì bạn có thể sử dụng document. querySelector('[title]') .

Ví dụ

▶ Hãy thử

đầu ra

Chọn phần tử theo thuộc tính src

Ví dụ

▶ Hãy thử

đầu ra

Chọn phần tử theo giá trị của thuộc tính

Trước đây, chúng tôi đã chọn các phần tử trên cơ sở tên thuộc tính, nhưng bây giờ chúng tôi cần chọn các phần tử trên cơ sở giá trị thuộc tính

Ví dụ: chúng ta có thể có nhiều thành phần trong tài liệu với thuộc tính tiêu đề nhưng chúng ta chỉ muốn chọn thành phần có tiêu đề 'hello'.

Để chọn phần tử trên cơ sở giá trị thuộc tính, hãy sử dụng phương thức querySelector và chuyển [thuộc tính . to it.

Ví dụ

▶ Hãy thử

đầu ra

Chọn tất cả các phần tử theo thuộc tính

Trong các ví dụ trên, chúng tôi đã sử dụng phương thức querySelector chỉ chọn phần tử phù hợp đầu tiên. Tuy nhiên, nếu chúng ta muốn chọn tất cả các phần tử phù hợp thì chúng ta có thể sử dụng phương thức querySelectorAll .

Nó cũng sử dụng bộ chọn CSS để chọn các thành phần phù hợp.

Nó trả về một đối tượng NodeList là một đối tượng giống như mảng. Nó chứa tất cả các yếu tố phù hợp.

Ví dụ

▶ Hãy thử

đầu ra

Nhìn vào kết quả ở trên, bạn có thể thấy phương thức querySelectorAll chọn tất cả các phần tử có thuộc tính title trong tài liệu và trả về một đối tượng NodeList

Phương thức Document.querySelectorAll(selector) trả về danh sách các phần tử tài liệu khớp với các bộ chọn đã chỉ định. Chúng ta có thể chỉ định thuộc tính trong bộ chọn

Kiểm tra ví dụ dưới đây

document.querySelectorAll("[myAttribute=value]");

Ví dụ trên có một bộ chọn thuộc tính, trong đó giá trị thuộc tính được xác định, myAttribute=value

Chức năng này được hỗ trợ với hầu hết các trình duyệt hiện đại

Sử dụng Thư viện

0 để lấy phần tử theo thuộc tính của nó trong JavaScript

Tóm lược. trong hướng dẫn này, bạn sẽ học cách lấy giá trị của một thuộc tính của một phần tử bằng phương thức

Để lấy giá trị của một thuộc tính của một phần tử, bạn sử dụng phương thức

let attributeValue = element.getAttribute(attributeName);
Code language: JavaScript (javascript)

Ví dụ: để lấy giá trị của thuộc tính

const link = document.querySelector('a');
let title = link.getAttribute('title');
Code language: JavaScript (javascript)

Có thể sử dụng phương thức

<a href="/api" data-method="post">Savea>
Code language: HTML, XML (xml)

Để lấy giá trị của thuộc tính

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

Làm cách nào để lấy phần tử theo thuộc tính trong HTML?

Làm cách nào để nhắm mục tiêu một thuộc tính trong JavaScript?

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