Get DOM Element by Attribute using JavaScript

avatar

Borislav Hadzhiev

Mon Dec 27 20213 min read

banner

Photo by Jeremy Bishop

Get DOM Element by Attribute using JavaScript #

To get an element by attribute, pass a selector that targets the specific attribute to the querySelector() method, e.g. document.querySelector('[data-id="first"]'). The querySelector method returns the first element in the document that matches the provided selector.

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.

In short, 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 of 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 you are looking for 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 with 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.

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

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