How to select a element using data attribute in JavaScript

In this tutorial, we are going to learn how to select/access an html element using the data attribute in JavaScript.

Consider, we have html elements with data attributes.

<div data-id="1">First div</div>
<div data-id="2">First div</div>
<h1 data-user="poppy"> Poppy</h1>

Now, we need to select the above elements by data attribute in JavaScript.

Selecting the Single element

To select the single element, we need to use document.querySelector() method by passing a [data-attribute = 'value'] as an argument.

Example:

const user = document.querySelector("[data-user='poppy']");

console.log(user);

Selecting the Multiple elements

To select the multiple elements with the same data attribute name, we need to use the document.querySelectorAll() method by passing a [data-attribute] as an argument.

Example:

const elements = document.querySelectorAll("[data-id]");

console.log(elements);

In the above example, the querySeletorAll() method returns the multiple elements in an array to access each element we need to loop through it.

const elements = document.querySelectorAll("[data-id]");

elements.forEach(el=>{
   console.log(el);
})