Get element by ID by partially matching String using JS

# Table of Contents

# Get element by ID by partially matching String using JS

Use the document.querySelector() method to get an element by id by partially matching a string.

The method returns the first element within the document that matches the provided selector.

Here is the HTML for the examples.

index.html

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

  <body>
    <div id="box1">Box 1</div>

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

# Get the first DOM element whose ID starts with a specific string

Use a caret ^ symbol to get the first DOM element that has an id attribute whose value starts with a specific string.

index.js

Copied!
// ✅ get element by ID that STARTS WITH `bo`
const element1 = document.querySelector(`[id^="bo"]`);
console.log(element1); // 👉️ div#box1

The code sample selects an element that has an id attribute whose value starts with bo.

We used the document.querySelector method to get an element by partially matching its id attribute.

The method takes one or more CSS selectors as parameters and returns the first element within the document that matches the provided selector.

If no matches are found, the method returns null.

If you need to select all elements that have an id starting with a specific value, use the querySelectorAll method instead.

index.js

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

console.log(elements); // 👉️ [div#box1]

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

# Get the first DOM element whose ID ends with a specific string

Use a dollar $ sign to select the first DOM element that has an id attribute with a value that ends with a specific string.

index.js

Copied!
// ✅ get element by ID that ENDS WITH `ox1`
const element2 = document.querySelector(`[id$="ox1"]`);
console.log(element3); // 👉️ div#box1

If you need to select all DOM elements that have an id that ends with a specific string, use document.querySelectorAll() instead.

index.js

Copied!
const elements = document.querySelectorAll(`[id$="ox1"]`);
console.log(elements); // 👉️ [div#box1]

The dollar sign $ signifies the end of the input in regular expressions and has the same meaning in selectors.

The code sample selects the first DOM element that has an id attribute whose value ends with ox1.

# Get the first DOM element whose ID contains a specific string

Use an asterisk * to get the first DOM element that has an id attribute whose value contains a specific string.

index.js

Copied!
// ✅ get element by ID that CONTAINS `ox`
const element3 = document.querySelector(`[id*="ox"]`);
console.log(element3); // 👉️ div#box1

If you need to select all DOM elements that have an id that ends with a specific string, use document.querySelectorAll() instead.

index.js

Copied!
const elements = document.querySelectorAll(`[id*="ox"]`);
console.log(elements); // 👉️ [div#box1]

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

# Narrowing down to elements of a specific type

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 DIV element by ID that STARTS WITH `bo`
const element1 = document.querySelector(`div[id^="bo"]`);
console.log(element1); // 👉️ div#box1

The example above selects a div element that has an id attribute with a value that starts with bo.

If no element matches the provided selector, the querySelector method returns null.

To make sure you don't try to access a property on a null value or try to invoke a method on one, you should handle this scenario.

index.js

Copied!
const element1 = document.querySelector(`div[id^="bo"]`);
console.log(element1); // 👉️ div#box1

// 👇️ Check if element1 stores truthy value
if (element1) {
  // 👇️ "Box 1"
  console.log(element1.textContent);
}

We checked if the element1 variable stores a truthy value before accessing the textContent property.

This helps us make sure we don't get an error by trying to access the property on a null value.

# 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.

The method returns a NodeList containing all the elements that match the provided selector.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <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 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 in regular expressions.

# Get all div elements by `id` starting with a specific string

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 selects all div elements that have an id attribute, whose value starts with box.

# Iterating over the collection of matching elements

If you need to iterate over the collection of elements, 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.

# Get all elements whose id starts with one of multiple strings

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" />
    <title>bobbyhadz.com</title>
  </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 the DOM elements which 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.

# 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 element by ID by partially matching String using JS

# Table of Contents