Skip to main content

How to Get a DOM Element by Attribute in JavaScript

While getElementById and getElementsByClassName are useful, they are limited. A more powerful and flexible way to select elements is by using their attributes. This allows you to find elements based on any attribute, such as title, data-id, name, or even custom attributes. The modern standard for this is the querySelector and querySelectorAll methods, combined with CSS attribute selectors.

This guide will teach you how to use CSS attribute selectors to find elements based on the presence of an attribute, its exact value, or a partial match of its value.

The Core Method: querySelector and querySelectorAll​

These two methods are the "Swiss Army knife" of DOM selection. They accept any valid CSS selector string, which includes the powerful set of attribute selectors.

  • document.querySelector('selector'): Returns the first element in the document that matches the selector.
  • document.querySelectorAll('selector'): Returns a NodeList containing all elements that match the selector.

We'll use this structure for our examples.

<div data-id="user-123" title="first-item">Box 1</div>
<div data-id="user-456" title="second-item">Box 2</div>
<span data-id="org-789">Span 3</span>

How to Select by Attribute Presence​

Sometimes you just need to find all elements that have a specific attribute, regardless of its value.

The CSS selector for attribute presence is simply the attribute name enclosed in square brackets: [attribute-name].

For example:

// Get the FIRST element that has a 'data-id' attribute
const firstWithDataId = document.querySelector('[data-id]');
console.log(firstWithDataId.textContent);   // Output: "Box 1"

// Get ALL elements that have a 'title' attribute
const allWithTitle = document.querySelectorAll('[title]');
console.log(allWithTitle.length);           // Output: 2

You can also combine this with a tag name to be more specific:

// Get all <span> elements that have a 'data-id' attribute
const allSpansWithDataId = document.querySelectorAll('span[data-id]');
console.log(allSpansWithDataId.length);     // Output: 1

How to Select by Exact Attribute Value​

This is a very common use case where you need to find an element with a specific attribute set to an exact value.

The CSS selector for an exact match is [attribute-name="value"].

For example:

// Get the element with the exact title "first-item"
const firstItem = document.querySelector('[title="first-item"]');
console.log(firstItem.textContent); // Output: "Box 1"

// Get all elements with data-id="user-456"
const user456 = document.querySelectorAll('[data-id="user-456"]');
console.log(user456.length);        // Output: 1

Selecting by Partial Attribute Value (Starts with, Ends with, Contains)​

Attribute selectors also provide powerful options for partial matching, which is very useful for working with dynamic or prefixed attributes.

[attr^="value"] - Attribute Starts With​

This selector finds elements where the attribute value begins with a specific string.

// Get all elements whose data-id starts with "user-"
const allUsers = document.querySelectorAll('[data-id^="user-"]');
console.log(allUsers.length); // Output: 2

[attr$="value"] - Attribute Ends With​

This selector finds elements where the attribute value ends with a specific string.

// Get the element whose title ends with "-item"
const firstEndingInItem = document.querySelector('[title$="-item"]');
console.log(firstEndingInItem.textContent); // Output: "Box 1"

[attr*="value"] - Attribute Contains​

This selector finds elements where the attribute value contains a specific substring anywhere within it.

// Get all elements whose data-id contains the substring "45"
const contains45 = document.querySelectorAll('[data-id*="45"]');
console.log(contains45.length); // Output: 1

Conclusion​

Using querySelector and querySelectorAll with CSS attribute selectors is the modern, standard, and most flexible way to find DOM elements.

  • To select by attribute presence, use [attr-name].
  • To select by exact value, use [attr-name="value"].
  • To select by partial value, use one of the powerful prefix matchers:
    • ^= for starts with.
    • $= for ends with.
    • *= for contains.

By mastering these simple patterns, you can select any element on the page based on its attributes with precision and clarity.

Table of Contents