Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Select all elements with "data-" attribute with jQuery and display on Console?
To select all elements with "data-" attributes in jQuery, you can use the [data-*] selector or document.querySelectorAll(). This tutorial shows both approaches for selecting elements and displaying their data attribute values in the console.
Method 1: Using jQuery Selector
jQuery provides a simple way to select elements with data attributes using the [data-*] selector:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Data Attributes with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p data-sentence="This is the program">Paragraph with data attribute</p>
<h6 data-sentence="This is the test">Heading with data attribute</h6>
<div data-info="Additional information">Div with data attribute</div>
<script>
// Select all elements with data-sentence attribute
$('[data-sentence]').each(function() {
console.log($(this).data('sentence'));
});
// Select all elements with any data attribute
$('[data-info]').each(function() {
console.log($(this).data('info'));
});
</script>
</body>
</html>
Method 2: Using document.querySelectorAll()
You can also use vanilla JavaScript with document.querySelectorAll() to achieve the same result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Data Attributes with querySelectorAll</title>
</head>
<body>
<p data-sentence="This is the program">Paragraph with data attribute</p>
<h6 data-sentence="This is the test">Heading with data attribute</h6>
<div data-info="Additional information">Div with data attribute</div>
<script>
// Select all elements with data-sentence attribute
var elements = document.querySelectorAll('[data-sentence]');
elements.forEach(function(element) {
console.log(element.getAttribute('data-sentence'));
});
// Select all elements with any data attribute (using wildcard)
var allDataElements = document.querySelectorAll('[data-info]');
allDataElements.forEach(function(element) {
console.log(element.getAttribute('data-info'));
});
</script>
</body>
</html>
Output
Both methods will produce the following console output:
This is the program This is the test Additional information
Comparison
| Method | Syntax | Requires jQuery? | Data Access |
|---|---|---|---|
| jQuery Selector | $('[data-*]') |
Yes | $(element).data('attribute') |
| querySelectorAll | document.querySelectorAll('[data-*]') |
No | element.getAttribute('data-attribute') |
Key Points
- Use
[data-attribute-name]to select elements with specific data attributes - jQuery's
.data()method automatically converts kebab-case to camelCase -
getAttribute()returns the exact attribute value as a string - Both methods work with modern browsers
Conclusion
Both jQuery selectors and document.querySelectorAll() effectively select elements with data attributes. Choose jQuery for simpler syntax or vanilla JavaScript for lighter dependencies.
Updated on: 2026-03-15T23:18:59+05:30
2K+ Views
Advertisements