DOM Elements

JavaScript DOM Elements: Attribute & Property Manipulation

DOM elements possess both HTML attributes (defined in raw HTML markup) and JavaScript properties (DOM object properties). Understanding how attributes and DOM properties synchronize is vital for form controls and dynamic styling.

Attribute vs DOM Property Visualized

flowchart LR
    HTMLMarkup["HTML: <input id='user-in' value='Initial' class='form-ctrl'>"]
    
    HTMLMarkup --> Attrs["Attributes (getAttribute / setAttribute)"]
    HTMLMarkup --> Props["DOM Object Properties (element.value, element.className)"]
    
    Attrs --> A1["Reflects raw HTML string values"]
    Props --> P1["Reflects live dynamic JavaScript state"]

Attribute API vs Property Access Matrix

Practical Code Example

// Demonstrating Attribute API vs DOM Property manipulation

document.addEventListener("DOMContentLoaded", () => {
  const inputEl = document.createElement("input");
  inputEl.setAttribute("type", "text");
  inputEl.setAttribute("id", "username-field");
  inputEl.setAttribute("data-user-id", "99");
  inputEl.value = "Default Value";

  document.body.appendChild(inputEl);

  // 1. Reading HTML Attributes vs DOM Properties
  console.log(`getAttribute('type'): ${inputEl.getAttribute("type")}`);
  console.log(`DOM Property id: ${inputEl.id}`);

  // 2. Custom Dataset API (data-* attributes)
  console.log(`Dataset user ID: ${inputEl.dataset.userId}`); // Accesses data-user-id

  // 3. Boolean Attribute Synchronization Pitfall
  inputEl.disabled = true; // Boolean DOM property
  console.log(`Has 'disabled' attribute? ${inputEl.hasAttribute("disabled")}`); // true

  // 4. Class Property vs Attribute
  inputEl.className = "input-field active"; // Use className, NOT class!
  console.log(`classList array:`, Array.from(inputEl.classList));
});

Best Practices & Gotchas

• Use className or classList for Classes: The HTML class attribute is accessed via element.className or element.classList because class is a reserved keyword in JavaScript.
• Use dataset for Custom HTML Data Attributes: HTML5 data-* attributes (data-user-role="admin") can be accessed cleanly via camelCase properties on element.dataset.userRole.
• Boolean Attributes: For boolean properties like disabled, checked, or readonly, assign booleans directly (el.disabled = true) rather than string attributes.

Self-Check Challenge

How do you access the value of an attribute <button data-action-type="submit"> using the dataset property?