Frontend Master

JavaScript Curriculum

Attributes & Dataset
+50 XP

Attributes & Dataset

easy
~25 min·50 XP

Each menu card needs to carry its price, category, and ID so JavaScript can filter, sort, and update them without extra server calls. data-* attributes are the bridge between your HTML and your JS logic.

Attributes & Dataset

Every HTML element carries attributes — class, href, src, disabled, and any data-* you define. JavaScript gives you dedicated methods to read, set, remove, and check them.

Attribute Methods

attribute-explorer.js
el.getAttribute('href')

Read any attribute by name. Returns null if missing. Works for all attributes including custom ones.

const link = document.querySelector('a')
link.getAttribute('href')    // → "/menu"
link.getAttribute('target')  // → null (not set)
link.getAttribute('class')   // → "logo active"
💡dataset vs getAttribute for data-*
For `data-*` attributes, always use `element.dataset` — it is cleaner and auto-converts kebab-case to camelCase. Use `getAttribute` / `setAttribute` for standard HTML attributes like `href`, `src`, `disabled`, and `aria-*` attributes.

data-* Attributes and dataset

Store any data you need directly on elements — no separate data structures required:

dataset.js
Select a menu item
HTML — data-* attributes
<div class="card"
  data-id="1"
  data-price="2.50"
  data-category="coffee"
  data-vegan="true">
  <h3>Espresso</h3>
</div>
Read via dataset
const card = document.querySelector('.card')
card.dataset.price
// → "2.50"
Naming rule: data-price → dataset.price · data-item-id → dataset.itemId (camelCase)
Set: card.dataset.price = '4.00' · Delete: delete card.dataset.price
ℹ️data-* naming rule
HTML attribute names are kebab-case: `data-item-id`. JavaScript dataset property names are camelCase: `element.dataset.itemId`. The conversion is automatic. Any attribute starting with `data-` is accessible via `dataset`.

classList — The Clean Way to Manage Classes

classList gives you dedicated methods for class management — much cleaner than manipulating className as a string:

classlist.js
Current classes on el
.card.featured
className: "card featured"
Class name to use
Console log
// Ready — try the buttons below
⚠️classList vs className
Avoid setting `el.className = 'new-class'` — it replaces ALL existing classes. Use `classList.add()`, `classList.remove()`, and `classList.toggle()` instead to safely add and remove individual classes without affecting others.

Your Challenge

Add data-price and data-category to each .card in your HTML. In JS, use querySelectorAll('.card') and loop through them — read card.dataset.category and log it. Then wire a click handler that uses classList.toggle('selected') on each card.

Challenge

Add data-price, data-category, and data-vegan attributes to your menu cards. Then use dataset to read them in JavaScript. Use classList.toggle to add an 'active' class to a card on click, and classList.contains to check if it is active.

getAttributesetAttributeremoveAttributehasAttributetoggleAttributedatasetdata-attributesclassListclassList.toggleclassList.contains
Attributes & Dataset | Nexus Learn