Get all DOM elements by Attribute in JavaScript

Get all DOM elements by Attribute in JavaScript #

To get all DOM elements by an attribute, use the querySelectorAll method, e.g. document.querySelectorAll('[class="box"]'). 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 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>

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]

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"]`));

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 would have 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.

For selecting elements based on a partial match of a specific attribute value, scroll down to the next subheading.

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 would not 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.

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 does not have a value, it would get selected and included in the return value of querySelectorAll.

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 #

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

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]

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.

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"]`);

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.

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.

Get all DOM elements by Attribute in JavaScript

Get all DOM elements by Attribute in JavaScript #

Get all DOM elements by Partial Match of an Attribute #

Borislav Hadzhiev