Using Data Attributes in JavaScript

To manipulate HTML elements with JavaScript, you often need to access and modify various attributes. One powerful technique for storing data associated with HTML elements is by using data attributes. In this article, we will explore how to use data attributes in JavaScript and understand their potential.

Data Attribute Introduction

To get started with data attributes, you'll need some HTML elements with data attributes. To create a data attribute, simply add a custom attribute to an HTML element that starts with data-.

<div id="test-div" data-first-name="Ed" data-last-name="Zhao" data-active></div>