Understanding Data Attributes and the Dataset Property

Because you clicked on this article, I’m guessing you are probably asking yourself questions like,

What are data attributes? Will I ever need or want to use them in my code? What actually happened to Malaysia Airlines Flight 370? What is JavaScript’s dataset property?

Well, don’t worry. I can help.

Like you, when I was first looking into the dataset property and data attributes, I was absolutely lost. Fortunately, after parsing through dozens of articles and playing around with my own code, I think I can not only understand what data attributes are, but make a case for why you might want to be using them in your own code.

To start, data attributes are basically any attributes on a HTML element who name starts with “data-”.

<div id="myDiv" data-name="Hope" data-understands-data-attributes="true"> 

For example, the div element above has two data attributes: name, which holds the string value of my name (Hope) and understands-data-attributes, which is a boolean with a value of true.

As you can see, data attributes are attributes of HTML elements that allow us assign and store additional data on DOM elements. By adding these custom data-attributes, we can drastically increase the utility of our HTML elements and thus, make our own lives as developers much easier.

Note: You shouldn’t store data in data attributes that would/could be stored in other more appropriate HTML elements/attributes. For example, you would not store an element’s class a data-class.

To answer another of your questions: dataset is a native property of any HTML element that provides access to set/get all of the custom data attributes on that element. Essentially, dataset is exactly what it sounds like: a set of data (in this case, the data attached to an individual HTML element)!

Note: While the dataset property itself can be read, it cannot directly be written. However, individual properties within the dataset (which represent data attributes) can be written!

Now that you hopefully have a better understanding of data attributes and the dataset property, let me quickly show you how I’ve found them to be super helpful in my own code.

Take a look at this simple doggo app:

My Doggo App (woof woof!)

When I was building out my doggo app, I was tasked with building a feature that would allow users to see only the good dogs in the “dog bar” that runs across the top of the page.

Although in the backend of my app, each dog contained an isGoodDog boolean property that determined whether or not each dog was good (true) or bad (false), I struggled with how to use the value of isGoodDog to update my DOM and show the users only the “good dogs”. Fortunately, at some point in my attempts to get this feature working, I remembered data attributes and the dataset property.

Here is the final HTML for my “dog bar”:

<div id="dog-bar">  
  <span data-is-good-dog="true">Mr. Bonkers</span>
  <span data-is-good-dog="false">Nugget</span>
  <span data-is-good-dog="true">Skittles</span>
  <span data-is-good-dog="false">Buttercup</span>
  <span data-is-good-dog="false">Lucipher</span>
  <span data-is-good-dog="true">Snooper Pooper</span>
  <span data-is-good-dog="true">Puddles</span>
  <span data-is-good-dog="true">Mittens</span>
  <span data-is-good-dog="false">Middens</span>
  <span data-is-good-dog="true">Fido</span>
</div>

As you can see, the dog bar is made up of a bunch of <span> elements that each contain a data “is-good-dog” attribute. This data attribute was set upon the creation of each span element using the value of my isGoodDog data stored in my database:

//=> "dog" refers to an individual dog object stored in my database
let dogSpan = document.createElement("span")
dogSpan.dataset.isGoodDog = dog.isGoodDog 
dogSpan.innerText = dog.name
dogBar.append(dogSpan)

Using dot notation, I created and set the value of individual property of my HTML element’s (dogSpan) dataset to the value of my isGoodDog boolean. In doing so, I essentially gave that HTML element access to data from my database that in turn, I could use to remove the “bad” dogs from my dog bar.

Note: While I set my data attribute using the above syntax (Element.dataset.property = value) you can also set (and get!) data attributes using the syntax of: Element.setAttribute(name, value) and Element.getAttribute(name, value).

Finally, on my filter button, I was able to use these data-is-good-dog attributes to remove “bad” dogs from my dog bar:

let allDogsSpan = dogBar.querySelectorAll("span")
filterButton.addEventListener("click", (event) => {
   if (onOrOff.innerText === "OFF") {
      onOrOff.innerText = "ON"
      allDogsSpan.forEach((eachDogSpan) => {
         if (eachDogSpan.dataset.isGoodDog === "false")
            dogBar.removeChild(eachDogSpan)
         } else {
            dogBar.appendChild(eachDogSpan)
         }
      })
   } else {
      onOrOff.innerText = "OFF"
      allDogsSpan.forEach((eachDogSpan) => {
         dogBar.appendChild(eachDogSpan)
      })
   }
})

As a result of my creating the data “is-good-dog” attribute for each <span> element on my HTML, I was able to add or remove each dog from the dog bar depending on the value of that data attribute and thus:

Now you can only see the good dogs!

I hope this simple tutorial has reduce some mystery surrounding data attributes and the dataset property. Other mysteries, unfortunately, still remain unsolved…

…for now.