Borislav Hadzhiev
Last updated: Jul 26, 2022
Check out my new book
To get all DOM elements by a data attribute, use the querySelectorAll
method, e.g. document.querySelectorAll('[data-id]')
. The querySelectorAll
method returns a NodeList
containing the elements that match the specified
selector.
Here is the html
code for this example.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div data-id="box1">Box 1</div> <div data-id="box2">Box 2</div> <script src="index.js"></script> </body> </html>
And here is the related JavaScript code.
// ✅ 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]
We passed different selectors to the
document.querySelectorAll
method to get a NodeList
containing the specific DOM elements.
Note that the querySelectorAll
method returns a NodeList
, not an array. If
you need to convert the response to an array, pass it to the Array.from
method.
const arr = Array.from(document.querySelectorAll('[data-id]'));
The first example shows how to get all DOM elements that have the data-id
attribute set.
const elements1 = document.querySelectorAll('[data-id]');
In the second example, we narrow things down to only div
elements that have
the data-id
attribute set.
const elements2 = document.querySelectorAll('div[data-id]');
If the DOM contained any span
or p
elements that have the data-id
attribute set, they wouldn't be included in the return value of the
querySelectorAll
method.
The third example selects elements that have the data-id
attribute set to
box1
.
const elements3 = document.querySelectorAll(`[data-id="box1"]`);
Note that the data-id
attribute has to be set to exactly box1
.
To get all elements by partially matching a data attribute, use the
querySelectorAll
method with a selector that matches a data attribute whose
value starts with, ends with, or contains a specific string.
// ✅ 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]
The first example selects all DOM elements where the value of the data-id
attribute starts with bo
.
const elements1 = document.querySelectorAll('[data-id^="bo"]');
^
symbol, which has the same meaning when used in regular expressions.The second example selects all DOM elements where the value of the data-id
attribute ends with ox1
.
const elements2 = document.querySelectorAll('[data-id$="ox1"]');
The third example selects all DOM elements where the value of the data-id
attribute contains the string box
.
const elements3 = document.querySelectorAll('[data-id*="box"]');
box
could be located anywhere in the value of the data-id
attribute for the condition to be met.You could also prefix the selector with a specific type of element you want to match to narrow down the results.
const elements1 = document.querySelectorAll(`div[data-id^="bo"]`);
The example selects only div
elements that have a data-id
attribute set and
the attribute's value starts with bo
.