DOM Elements

JavaScript DOM Elements: Attributes, Properties, and dataset

JavaScript DOM elements expose both HTML attributes (written in markup) and live JavaScript properties (stored on the DOM object). Knowing the difference between getAttribute(), el.value, and el.dataset keeps form controls and state attributes reliable.

HTML Attributes vs. Live DOM Properties

HTML attributes initialize an element when the browser parses the page (<input value="initial">). DOM properties hold the live current state (input.value) as the user types or interacts.

For boolean attributes such as disabled, checked, or hidden, always toggle the boolean DOM property (btn.disabled = true) rather than passing "false" strings to setAttribute().

Working with dataset (data-* Attributes)

Custom data-* attributes store clean metadata right on HTML elements and map automatically to camelCase keys on element.dataset.

const app = document.getElementById("app");
if (app) {
  const btn = document.createElement("button");
  btn.id = "save-btn";
  btn.textContent = "Save Draft";
  btn.setAttribute("aria-label", "Save draft article");
  btn.dataset.postId = "409";      // Creates data-post-id="409"
  btn.disabled = false;
  app.appendChild(btn);

  console.log("ARIA label:", btn.getAttribute("aria-label"));
  console.log("Dataset postId:", btn.dataset.postId);
  console.log("Has disabled attr:", btn.hasAttribute("disabled"));
}

Common Mistakes to Avoid

• Calling btn.setAttribute("disabled", "false"): In HTML, the mere presence of disabled disables the button even if its string value is "false"! Use btn.disabled = false or btn.removeAttribute("disabled").
• Reading input.getAttribute("value") after the user types: getAttribute("value") still returns the original HTML default value, not what the user typed. Always read input.value.
• Storing large JSON blobs inside data-* attributes: Keep dataset values short (IDs, slugs, states); store complex data in JavaScript Map objects or state stores.

Frequently Asked Questions

How are multi-word data-* attributes named in element.dataset?

Hyphens become camelCase automatically, so data-user-role="admin" maps to element.dataset.userRole.

What is removeAttribute() used for?

el.removeAttribute("name") deletes an attribute completely from the HTML tag, which is useful for clearing custom flags or toggling ARIA states cleanly.

Why does el.className use className instead of el.class?

class is a reserved JavaScript keyword, so the DOM property is named className (and el.classList is preferred for adding or toggling classes).