Get all Elements by data attribute using JavaScript

avatar

Borislav Hadzhiev

Sun Dec 26 20213 min read

banner

Photo by Iler Stoe

Table of Contents #

  1. Get all Elements by data attribute using JS
  2. Get all DOM elements by Partial Match of a Data Attribute

Get all Elements by data attribute using JS #

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.

index.html
<!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.

index.js
// โœ… 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.

index.js
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.

index.js
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.

index.js
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.

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

Note that the data-id attribute has to be set exactly to box1.

For selecting elements based on a partial match of a specific attribute value, scroll down to the next example.

Get all DOM elements by Partial Match of a Data Attribute #

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.

index.js
// โœ… 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.

index.js
const elements1 = document.querySelectorAll('[data-id^="bo"]');
You might be familiar with the caret ^ symbol, which has the same meaning when used with regular expressions.

The second example selects all DOM elements where the value of the data-id attribute ends with ox1.

index.js
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.

index.js
const elements3 = document.querySelectorAll('[data-id*="box"]');
The string box could be located anywhere in the value of the data-id attribute for the condition to be met.

Note that you could also prefix the selector with a specific type of element you want to match to narrow down the results.

index.js
const elements1 = document.querySelectorAll(`div[data-id^="bo"]`);

The example above selects only div elements that have a data-id attribute set and the attribute's value starts with bo.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee