Get all elements whose ID starts with specific String in JS

Get all elements whose ID starts with specific String in JS #

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.

index.html

Copied!
<!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.

index.js

Copied!
// ✅ 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]

If you need to match the first element with an 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.

index.js

Copied!
const elements1 = document.querySelectorAll(`[id^="box"]`);
console.log(elements1); // 👉️ [div#box1, div#box2, div#box3]

You might be familiar with the caret ^ 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.

index.js

Copied!
// ✅ 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.

index.js

Copied!
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.

index.html

Copied!
<!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.

index.js

Copied!
// ✅ 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.

Get all elements whose ID starts with specific String in JS

Get all elements whose ID starts with specific String in JS #

Further Reading #

Borislav Hadzhiev