- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Select all elements with “data-” attribute with jQuery and display on Console?
To select all elements with “data-“ attribute, use document.querySelectorAll(“”). Following is the code −
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>Document</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <p data-sentence="This is the program"></p> <br/> <h6 data-sentence="This is the test"></h6> <script> var result=document.querySelectorAll('[data-sentence]'); for (var index in result){ if (result.hasOwnProperty(index)){ console.log(result[index].getAttribute('data-sentence')); } } </script> </body> </html>
To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.
Output
This will produce the following output −
- Related Articles
- How to select elements with a specified attribute and value with CSS
- JavaScript: How to loop through all DOM elements on a page and display result on console?
- How to select multiple elements with jQuery?
- Selects all elements with alt attribute with CSS
- How to select elements with a specified attribute with CSS
- How to select element with specific class and title attribute using jQuery?
- Select elements with the specified attribute starting with the specified value with CSS
- Display the dropdown’s (select) selected value on console in JavaScript?
- Select elements whose attribute value ends with a specified value with CSS
- Select elements whose attribute value begins with a specified value with CSS
- Access the file contents from inside the callback function and display on console – jQuery
- Selects all elements with a lang attribute value starting with "en" with CSS
- jQuery select() with Examples
- Select elements whose attribute value contains a specified value with CSS
- How to select elements with an attribute value containing a specified word with CSS?

Advertisements