by Sai gowtham

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.querySelctor("[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);
})

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course