Borislav Hadzhiev
Mon Jan 03 2022·2 min read
Photo by Diana Simumpande
Use the document.querySelectorAll()
method to get all elements whose id
starts with a specific string, e.g. document.querySelectorAll('[id^="box"]')
.
The method returns a NodeList
containing all the elements that match the
provided selector.
Here is the HTML for the examples in this article.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box1">Box 1</div> <div id="box2">Box 2</div> <div id="box3">Box 3</div> <script src="index.js"></script> </body> </html>
And here is the related JavaScript code.
// ✅ get ALL elements whose ID starts with `box` const elements1 = document.querySelectorAll(`[id^="box"]`); console.log(elements1); // 👉️ [div#box1, div#box2, div#box3] // ✅ get FIRST element whose ID starts with `box` const element1 = document.querySelector(`[id^="box"]`); console.log(element1); // 👉️ [div#box1]
id
that starts with a specific string, use the querySelector
method instead.We used the
document.querySelectorAll
method to get a collection of the elements that have an id
attribute, whose
value starts with box
.
If no matches are found, the method returns an empty NodeList
.
The example selects all of the elements in the document that have an id
attribute with a value starting with box
.
const elements1 = document.querySelectorAll(`[id^="box"]`); console.log(elements1); // 👉️ [div#box1, div#box2, div#box3]
^
symbol, which has the same meaning when used with regular expressions.Note that you could also prefix the selector with the specific type of element you want to match, to narrow down the results.
// ✅ get all DIV elements whose ID starts with `box` const elements1 = document.querySelectorAll(`div[id^="box"]`); console.log(elements1); // 👉️ [div#box1, div#box2, div#box3]
The example above selects all div
elements that have an id
attribute, whose
value starts with box
.
If you need to iterate over the collection of elements, you can use the
forEach()
method.
const elements1 = document.querySelectorAll(`div[id^="box"]`); elements1.forEach(element => { console.log(element.textContent); });
The function we passed to the forEach
method gets called with each element in
the NodeList
.
You could pass multiple selectors to the querySelectorAll
method if you need
to get elements with id
starting with multiple different values.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box1">Box 1</div> <div id="box2">Box 2</div> <div id="container1">Container 1</div> <div id="container2">Container 2</div> <script src="index.js"></script> </body> </html>
And here is the related JavaScript code.
// ✅ get all by ID starting with `box` or `container` const elements1 = document.querySelectorAll(`[id^="box"], [id^="container"]`); // 👇️ [div#box1, div#box2, div#container1, div#container2] console.log(elements1);
We selected all of the DOM elements who have an id
attribute, whose value
starts with box
or container
.
You can pass as many valid CSS selectors as necessary to the querySelectorAll
method, just make sure they are separated by commas.