Borislav Hadzhiev
Sun Dec 26 2021·3 min read
Photo by Allef Vinicius
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.
<!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.
// ✅ 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.
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
.
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
.
In the second example, we get more specific and get all div
elements where the
class
attribute is equal to box
.
const elements2 = document.querySelectorAll(`div[class="box"]`);
This would not match any span
or p
elements that have their class
attribute set to box
.
NodeList
as a response from querySelectorAll
.In the third example, we get all div
elements that have the class
attribute
set on them.
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.
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.
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.
// ✅ 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
.
const elements1 = document.querySelectorAll(`[class^="bo"]`);
^
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
.
const elements2 = document.querySelectorAll(`[class$="ox"]`);
The third example selects all DOM elements, where the value of the class
attribute contains the string box
.
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.
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
.