Get all Elements by data attribute using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 26, 2022

banner

Check out my new book

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 to exactly 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 in 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.

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 selects only div elements that have a data-id attribute set and the attribute's value starts with bo.

Use the search field on my Home Page to filter through my more than 3,000 articles.