Skip to main content

How to Get an Element by Partially Matching its ID in JavaScript

While document.getElementById() is perfect for finding an element when you know its exact ID, you often need to find elements based on a pattern in their ID. For example, you might want to find all elements whose IDs start with user- or contain a specific substring. The modern and most powerful way to do this is with CSS attribute selectors.

This guide will teach you how to use querySelector() and querySelectorAll() with attribute selectors to find elements by partially matching their ID. You will learn the syntax for "starts with," "ends with," and "contains" a specific string.

The Core Method: querySelector and CSS Attribute Selectors​

The document.querySelector() method is the perfect tool for this job. It finds the first element in the document that matches a specified CSS selector. Attribute selectors ([...]) allow us to target elements based on the presence or value of their attributes, including id.

How to Find an Element Whose ID Starts With a String​

To find an element whose id attribute begins with a specific string, you use the [id^="value"] selector. The caret (^) signifies "starts with."

Problem: you need to find the first element whose ID starts with "box-".

<div id="box-1">First Box</div>
<div id="box-2">Second Box</div>
<div id="other-3">Third Box</div>

Solution:

// Select the first element whose ID starts with "box-"
const firstBox = document.querySelector('[id^="box-"]');

console.log(firstBox.textContent); // Output: "First Box"

How to Find an Element Whose ID Ends With a String​

To find an element whose id attribute ends with a specific string, you use the [id$="value"] selector. The dollar sign ($) signifies "ends with."

Porblem: you need to find the first element whose ID ends with "-highlight".

<div id="item-info">Info</div>
<div id="item-highlight">Highlight</div>

Solution:

// Select the first element whose ID ends with "-highlight"
const highlightedItem = document.querySelector('[id$="-highlight"]');

console.log(highlightedItem.textContent); // Output: "Highlight"

How to Find an Element Whose ID Contains a String​

To find an element whose id attribute contains a specific substring anywhere within it, you use the [id*="value"] selector. The asterisk (*) signifies "contains."

Problem: you need to find the first element whose ID contains the substring "-item-".

<div id="user-123">User</div>
<div id="product-item-456">Product</div>

Solution:

// Select the first element whose ID contains "-item-"
const productItem = document.querySelector('[id*="-item-"]');

console.log(productItem.textContent); // Output: "Product"

How to Get All Matching Elements​

The querySelector() method only ever returns the first matching element. If you need to find all elements that match a pattern, you must use document.querySelectorAll(). This method returns a NodeList containing all matching elements.

Problem: you need to select all elements whose IDs start with "box-".

<div id="box-1">First Box</div>
<div id="box-2">Second Box</div>
<div id="other-3">Third Box</div>

Solution:

// Select ALL elements whose IDs start with "box-"
const allBoxes = document.querySelectorAll('[id^="box-"]');

console.log(allBoxes.length); // Output: 2

// You can iterate over the NodeList with forEach
allBoxes.forEach(box => {
  box.style.color = 'red';
});

This same principle applies to the "ends with" ($) and "contains" (*) selectors as well.

Conclusion​

CSS attribute selectors provide a powerful and declarative way to find elements by partially matching their id or any other attribute.

  • To find the first matching element, use document.querySelector().
  • To find all matching elements, use document.querySelectorAll().
  • Use the [id^="..."] selector to match an ID that starts with a string.
  • Use the [id$="..."] selector to match an ID that ends with a string.
  • Use the [id*="..."] selector to match an ID that contains a string.

By mastering these simple selectors, you gain a tremendous amount of flexibility for querying the DOM in your JavaScript code.

Table of Contents