Get DOM Element by Attribute using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

Get DOM Element by Attribute using JavaScript #

Use the querySelector() method to get a DOM element by attribute, e.g. document.querySelector('[data-id="first"]'). The querySelector method will return the first element in the document that matches the specified attribute.

Here is the html for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div data-id="first" class="box">Box 1</div> <div data-id="second" class="box">Box 2</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
// ✅ querySelector for single element const el = document.querySelector('[data-id="first"]'); console.log(el); // 👉️ div // ✅ querySelectorAll for all elements matching attribute const elements = document.querySelectorAll('[class="box"'); console.log(elements); // 👉️ [div.box, div.box]
For selecting elements based on a partial match of a specific attribute value, scroll down to the next subheading.

The first example uses the document.querySelector method to get the first element in the document that has a data-id attribute set to first.

If you need a collection of elements, use the document.querySelectorAll method and if you need the first element that matches the provided selector, use the document.querySelector method.

The second example selects all the elements in the document that have a class attribute set to box.

You can also narrow things down by selecting only div elements that have a specific attribute or selecting elements that have the attribute set, regardless of the value.
index.js
// ✅ Get first div that has `data-id` attribute set to `first` const el1 = document.querySelector('div[data-id="first"]'); console.log(el1); // 👉️ div.box // ✅ Get first element that has a `data-id` attribute set const el2 = document.querySelector('[data-id]'); console.log(el2); // 👉️ div.box

The first example looks for a div element that has the data-id attribute set to first.

Any span or p elements that have the attribute set would not match the query.

The second example looks for a DOM element that has the data-id attribute set.

The attribute could be set to any value for the condition to be satisfied.

If need to select a collection of elements and not the first matching element, use the querySelectorAll method instead of querySelector.

Get DOM Element by Partial Match of an Attribute #

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

index.js
// ✅ Get element where `data-id` STARTS with "fir" const el1 = document.querySelector('[data-id^="fir"]'); // ✅ Get element where `data-id` ENDS with "st" const el2 = document.querySelector('[data-id$="st"'); // ✅ Get element where `data-id` CONTAINS "first" const el3 = document.querySelector('[data-id*="first"');
If you need a collection of the matching elements and not just the first element, use the querySelectorAll method instead of querySelector.

The first example selects a DOM element where the value of the data-id attribute starts with fir.

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

The second example selects a DOM element where the value of the data-id attribute ends with st.

index.js
const el2 = document.querySelector('[data-id$="st"');

The third example selects a DOM element where the value of the data-id attribute contains first.

index.js
const el3 = document.querySelector('[data-id*="first"');

The string first could be located anywhere in the data-id attribute, as long as it is contained, the condition would 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
// ✅ Get `div` where `data-id` STARTS with "fir" const el1 = document.querySelector('div[data-id^="fir"]');

The example selects a div element where the value of the data-id attribute starts with fir.

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