Get DOM Element(s) by Attribute using JavaScript

# Table of Contents

# Get DOM Element by Attribute using JavaScript

Use the querySelector() method to get a DOM element by attribute.

The querySelector method will return the first element in the document that matches the specified attribute.

Here is the HTML for the examples.

index.html

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

  <body>
    <div title="first" class="box">Box 1</div>
    <div title="second" class="box">Box 2</div>

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

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
// ✅ querySelector for single element
const el = document.querySelector('[title="first"]');
console.log(el); // 👉️ div

// ✅ querySelectorAll for all elements matching attribute
const elements = document.querySelectorAll('[class="box"');
console.log(elements); // 👉️ [div.box, div.box]

get dom element by attribute

The code for this article is available on GitHub

The first example uses the document.querySelector method to get the first element in the document that has a title 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.

# Find an element of a specific type by attribute

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

Copied!
// ✅ Get first div that has `title` attribute set to `first`
const el1 = document.querySelector('div[title="first"]');
console.log(el1); // 👉️ div.box

// ✅ Get first element that has a `title` attribute set
const el2 = document.querySelector('[title]');
console.log(el2); // 👉️ div.box

find element of specific type by attribute

The code for this article is available on GitHub

The first example looks for a div element that has the title 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 title 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

Copied!
// ✅ Get element where `title` STARTS with "fir"
const el1 = document.querySelector('[title^="fir"]');

// ✅ Get element where `title` ENDS with "st"
const el2 = document.querySelector('[title$="st"');

// ✅ Get element where `title` CONTAINS "first"
const el3 = document.querySelector('[title*="first"');

The code for this article is available on GitHub

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 title attribute starts with fir.

index.js

Copied!
const el1 = document.querySelector('[title^="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 title attribute ends with st.

index.js

Copied!
const el2 = document.querySelector('[title$="st"');

The third example selects a DOM element where the value of the title attribute contains first.

index.js

Copied!
const el3 = document.querySelector('[title*="first"');

The string first could be located anywhere in the title 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

Copied!
// ✅ Get `div` where `title` STARTS with "fir"
const el1 = document.querySelector('div[title^="fir"]');

The example selects a div element where the value of the title attribute starts with fir.

# Select Elements by Attribute Name using JavaScript

You can select elements by an attribute name by passing a selector with the attribute's name to the querySelectorAll() method.

The querySelectorAll method will return a collection of the elements that have the provided attribute set.

Here is the HTML for the examples.

index.html

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

  <body>
    <div title="first">Box 1</div>
    <div title="second">Box 2</div>

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

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
// ✅ All elements with `title` attribute
const elements = document.querySelectorAll('[title]');
console.log(elements); // 👉️ [div, div]

// ✅ First element with `title` attribute
const element = document.querySelector('[title]');
console.log(element); // 👉️ div

The code for this article is available on GitHub

The first example uses the document.querySelectorAll() method to get a collection of all elements that have the title attribute set.

The second example uses the document.querySelector() method to get the first element in the document that has the title attribute set.

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.

You can also narrow things down by selecting only div elements by a specific attribute name.

index.js

Copied!
// ✅ Get `div` elements with `title` attribute
const elements = document.querySelectorAll('div[title]');
console.log(elements); // 👉️ [div, div]

The code snippet targets only div elements that have the title attribute set.

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

An alternative approach is to select the elements from the DOM and iterate over the NodeList checking if each element has a specific attribute set.

index.js

Copied!
const elements = document.getElementsByTagName('*');

const matches = [];

for (const element of elements) {
  if (element.hasAttribute('title')) {
    matches.push(element);
  }
}

console.log(matches); // 👉️ [div, div]

We used the getElementsByTagName method to select all elements in the DOM.

You could narrow this down to only div or p elements to work with a smaller collection.

The next step is to use the for...of loop to iterate over the NodeList.

On each iteration, we check if the element has the title attribute set and if it does, we push the element to the matches array.

# Get all DOM elements by Attribute in JavaScript

Use the querySelectorAll method to get all DOM elements by an attribute.

The querySelectorAll method will return a NodeList containing the elements that have the specified attribute set to the given value.

Here is the HTML code for the example.

index.html

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

  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
// ✅ Get all where specific "attribute = value"
const elements1 = document.querySelectorAll(`[class="box"]`);
console.log(elements1); // 👉️ [div.box, div.box, div.box]

// -------------------------------------------------------

// ✅ Get only DIVs where specific "attribute = value"
const elements2 = document.querySelectorAll(`div[class="box"]`);
console.log(elements2); // 👉️ [div.box, div.box, div.box]

// -------------------------------------------------------

// ✅ Get all DIVs where specific attribute is set to any value
const elements3 = document.querySelectorAll('div[class]');
console.log(elements3); // 👉️ [div.box, div.box, div.box]

// -------------------------------------------------------

// ✅ Get all elements where specific attribute is set to any value
const elements4 = document.querySelectorAll('[class]');
console.log(elements4); // 👉️ [div.box, div.box, div.box]

The code for this article is available on GitHub

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(`[class="box"]`));

# Get all DOM elements by exact match attribute

The first example shows how to get all DOM elements where the class attribute is set to box.

index.js

Copied!
const elements1 = document.querySelectorAll(`[class="box"]`);

The attribute value has to be an exact match for the condition to be met, e.g. it can't be box blue, it has to be just box.

# Get all elements of type by exact match attribute

In the second example, we get more specific and get all div elements where the class attribute is equal to box.

index.js

Copied!
const elements2 = document.querySelectorAll(`div[class="box"]`);

This wouldn't match any span or p elements that have their class attribute set to box.

The value of the attribute has to be in quotes and it's quite tricky to alternate quotes in the contents of a string. If you don't close the inner quotes, you would get an empty NodeList as a response from querySelectorAll.

# Get all elements of type that have the attribute set to any value

In the third example, we get all div elements that have the class attribute set on them.

index.js

Copied!
const elements3 = document.querySelectorAll('div[class]');

As long as the div element has the class attribute set, even if the attribute doesn't have a value, it would get selected and included in the return value of querySelectorAll.

# Get all elements that have the attribute set

The fourth example shows how to get all DOM elements that have the class attribute set.

index.js

Copied!
const elements4 = document.querySelectorAll('[class]');

This could be any DOM element, e.g. a div, span or p, as long as it has the class attribute set.

# Get all DOM elements by Partial Match of an Attribute

Use the querySelectorAll method to get all DOM elements by partially matching an attribute.

index.js

Copied!
// ✅ Get all where value of class starts with `bo`
const elements1 = document.querySelectorAll(`[class^="bo"]`);
console.log(elements1); // 👉️ [div.box, div.box, div.box]

// -------------------------------------------------------

// ✅ Get all where value of class ends with `ox`
const elements2 = document.querySelectorAll(`[class$="ox"]`);
console.log(elements2); // 👉️ [div.box, div.box, div.box]

// -------------------------------------------------------

// ✅ Get all where value of class contains `box`
const elements3 = document.querySelectorAll(`[class*="box"]`);
console.log(elements3); // 👉️ [div.box, div.box, div.box]

# Get all DOM elements with attribute that starts with

The first example selects all DOM elements where the value of the class attribute starts with bo.

index.js

Copied!
const elements1 = document.querySelectorAll(`[class^="bo"]`);

You might be familiar with the caret ^ symbol, which has the same meaning when used with regular expressions.

# Get all DOM elements with attribute that ends with

The second example selects all DOM elements where the value of the class attribute ends with ox.

index.js

Copied!
const elements2 = document.querySelectorAll(`[class$="ox"]`);

# Get all DOM elements with attribute that contains a string

The third example selects all DOM elements, where the value of the class attribute contains the string box.

index.js

Copied!
const elements3 = document.querySelectorAll(`[class*="box"]`);

The string box could be located anywhere in the value of the class attribute for the condition to be met.

# Get all elements of type with partial match of attribute

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[class^="bo"]`);

The example above selects only div elements that have a class attribute set and the attribute's value starts with bo.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Get DOM Element(s) by Attribute using JavaScript

# Table of Contents

# Get DOM Element by Attribute using JavaScript

# Find an element of a specific type by attribute

# Get DOM Element by Partial Match of an Attribute

# Select Elements by Attribute Name using JavaScript

# Get all DOM elements by Attribute in JavaScript

# Get all DOM elements by exact match attribute

# Get all elements of type by exact match attribute

# Get all elements of type that have the attribute set to any value

# Get all elements that have the attribute set

# Get all DOM elements by Partial Match of an Attribute

# Get all DOM elements with attribute that starts with

# Get all DOM elements with attribute that ends with

# Get all DOM elements with attribute that contains a string

# Get all elements of type with partial match of attribute

# Additional Resources

Borislav Hadzhiev