#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/javascript/the-dom/data-attributes

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░███████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/javascript/the-dom/data-attributes

Repovive

Data Attributes - The DOM | JavaScript | Repovive

Repovive.

JavaScript22 sections · 783 units18h total

Open in Course

Data Attributes

Store custom data on elements

Data attributes (data-*) store custom data on HTML elements. Access them through the dataset property.

<div data-user-id="123" data-role="admin"></div>

const el = document.querySelector("div");
console.log(el.dataset.userId); // "123"
console.log(el.dataset.role);   // "admin"
el.dataset.status = "active";

Hyphenated names become camelCase in JavaScript.