Get element by data attribute using JavaScript

Table of Contents #

Get element by data attribute using JavaScript #

Use the querySelector method to get an element by data attribute, e.g. document.querySelector('[data-id="box1"]'). The querySelector method returns the first element that matches the provided selector or null if no element matches the selector in the document.

Here is the HTML for the examples in this article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div data-id="box1">Box 1</div>
    <span data-id="box2">Box 2</span>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
// ✅ Get first element with data-id = `box1`
const el1 = document.querySelector('[data-id="box1"]');
console.log(el1); // 👉️ div

// ✅ Get first element that has data-id attribute set
const el2 = document.querySelector('[data-id]');
console.log(el2); // 👉️ div

// ✅ Get all elements with data-id = `box1`
const elements = document.querySelectorAll('[data-id="box1"]');
console.log(elements); // 👉️ [div]

If you need a collection with all elements that have a specific data attribute, use the querySelectorAll method instead. The method takes the same parameter as querySelector.

We used the document.querySelector method to get the first element in the DOM that has a data-id attribute equal to box1.

If you have to partially match a data attribute, scroll down to the next subheading.

The second example shows how to get the first element that has the data-id attribute set to any value.

index.js

Copied!
const el2 = document.querySelector('[data-id]');

You can also narrow things down by looking for a specific type of element, e.g. a div that has a data attribute set to a certain value.

index.js

Copied!
const el1 = document.querySelector('div[data-id="box1"]');
console.log(el1); // 👉️ div

The example above would only select div elements that have a data-id attribute set to box1.

If you need a collection of elements, instead of the first element that matches a selector, simply replace querySelector with querySelectorAll.

Get element by Partially matching a Data Attribute #

To get an element by partially matching a data attribute, use the querySelector method with a selector that matches a data attribute whose value starts with, ends with, or contains a specific string.

index.js

Copied!
// ✅ get element where data-id starts with `bo`
const el1 = document.querySelector('[data-id^="bo"]');
console.log(el1); // 👉️ div

// ✅ get element where data-id ends with `ox1`
const el2 = document.querySelector('[data-id$="ox1"]');
console.log(el2); // 👉️ div

// ✅ get element where data-id contains `box`
const el3 = document.querySelector('[data-id*="box"]');
console.log(el3); // 👉️ div

Any of the examples above can be replaced with the querySelectorAll method to get a collection of elements matching the selector.

The first example gets the first DOM element that has a data-id attribute, whose value starts with bo.

index.js

Copied!
const el1 = document.querySelector('[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 the first DOM element that has a data-id attribute that ends with ox1.

index.js

Copied!
const el2 = document.querySelector('[data-id$="ox1"]');

The third example selects the first DOM element that has a data-id attribute that contains box.

index.js

Copied!
const el3 = document.querySelector('[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 el1 = document.querySelector('div[data-id^="bo"]');

The example above selects a div element that has a data-id attribute that starts with bo.

Get element by data attribute using JavaScript

Table of Contents #

Get element by data attribute using JavaScript #

Get element by Partially matching a Data Attribute #

Borislav Hadzhiev