Get all Elements by data attribute using JavaScript

Table of Contents #

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

Copied!
<!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

Copied!
// ✅ 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

Copied!
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

Copied!
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

Copied!
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

Copied!
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

Copied!
// ✅ 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

Copied!
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

Copied!
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

Copied!
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

Copied!
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.

Get all Elements by data attribute using JavaScript

Table of Contents #

Get all Elements by data attribute using JS #

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

Join my newsletter

Borislav Hadzhiev