Attributes and Properties

Mastering JavaScript requires understanding how it interacts with the Document Object Model (DOM). This tutorial covers DOM attributes and properties, explaining how to read, modify, and synchronize them to manipulate web pages dynamically.

Introduction to the DOM in JavaScript

The DOM represents a web page as a hierarchical tree of objects, enabling programming languages like JavaScript to interact with the page's content, style, and structure. Each element in the HTML document is mirrored as an object in the DOM, and these objects have properties and attributes that can be manipulated using JavaScript.

Differences Between Attributes and Properties

Although the terms "attributes" and "properties" are often used interchangeably, they have distinct meanings in the context of the DOM:

• Attributes: These are defined in the HTML code. They provide additional information about HTML elements. Attributes are always strings and are accessed using methods like getAttribute() and setAttribute().
• Properties: These are the characteristics of DOM objects that represent HTML elements. Properties can be of any data type, such as boolean, string, or number, and are accessed directly using the dot notation.

In short: an attribute is what you wrote in the HTML source; a property is what the browser parsed it into and exposes on the JavaScript object. They look the same for simple cases like id, but they are two different things.

Note on synchronization: For most standard attributes (like id, class), changing the attribute updates the matching property and vice versa. But the sync is not guaranteed everywhere, and a few important attributes deliberately break it (see When sync breaks down below).

Code Example: Accessing Attributes and Properties

<!-- snippet: html-result -->

<div id="demo" class="sample" data-level="1">Hello, World!</div>
<br />
<div>first getAttributes result (data-level): <span id="1"></span></div>
<div>className property: <span id="2"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");

  // Accessing an attribute
  let classAttribute = demoElement.getAttribute("data-level");  // Output: "1"
  span1.innerHTML = classAttribute;
  
  // Accessing a property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  const classNameProperty = demoElement.className;  // Output: "sample"
  span2.innerHTML = classNameProperty;
</script>

The Attribute Methods

Every element exposes four standard methods for working with attributes by name. They always deal in strings, and they map directly to the HTML source:

Attribute names are case-insensitive (id and ID are the same), and every value is read back as a string, even if it looks like a number.

Setting Attributes

Use the setAttribute() method to add a new attribute or change the value of an existing attribute on an HTML element.

Code Example: Setting Attributes

<!-- snippet: html-result -->

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");
  
  // Changing the attribute
  demoElement.setAttribute("class", "changed");
  // The property updates automatically due to attribute-property synchronization
  span1.innerHTML = demoElement.className;
</script>

This code snippet changes the class attribute of the div element to "changed".

Removing Attributes

To completely remove an attribute from an HTML element, use the removeAttribute() method. This is useful when you want to strip an element of a specific behavior or style defined by an attribute.

Pair it with hasAttribute() to act conditionally:

if (demoElement.hasAttribute("disabled")) {
  demoElement.removeAttribute("disabled");
}

Reassigning Properties

Properties of DOM elements can be easily reassigned directly using dot notation, allowing for a more flexible manipulation of the element's characteristics.

Code Example: Modifying Properties

<!-- snippet: html-result -->

<div id="demo" class="sample">Hello, World!</div>
<br />
<div>className property after change: <span id="span1"></span></div>
<script>
  const demoElement = document.getElementById("demo");
  const span1 = document.getElementById("span1");

  // Changing the property
  // Note: 'class' is a reserved keyword in JS, so the property is named 'className'
  demoElement.className = "changed";
  span1.innerHTML = demoElement.className;
</script>

This example changes the className property of the div element, demonstrating how properties can be used to control element characteristics dynamically.

When Attribute–Property Sync Breaks Down

The convenient one-to-one mapping has exceptions you must know about, or you will spend hours debugging.

The value property of inputs

The value attribute holds the initial (default) value from the HTML. The value property holds the current value the user is typing. After the user edits the field, the two diverge: the property changes, the attribute does not.

// <input id="name" value="initial">
const input = document.getElementById("name");
// user types "Alice" into the field...

input.getAttribute("value"); // "initial"  — still the HTML default
input.value;                 // "Alice"     — the live, current value

The same idea applies to <input type="checkbox">: the checked attribute is the default state, the checked property is whether it is checked right now.

The href property of links

For an <a href="/page">, getAttribute("href") returns exactly what you wrote ("/page"), but the href property returns the fully resolved absolute URL ("https://example.com/page").

// <a id="link" href="/page">
const link = document.getElementById("link");
link.getAttribute("href"); // "/page"
link.href;                 // "https://example.com/page"

Rule of thumb: use the attribute methods when you need the raw value exactly as authored; use the property when you need the browser's live, parsed value.

Boolean Attributes

Some HTML attributes — disabled, checked, required, readonly, selected — are boolean: their mere presence means true, regardless of value. disabled="" and disabled="false" both disable the element.

In JavaScript the matching property is a real boolean, which is the cleaner way to toggle them:

button.disabled = true;   // adds the attribute, disables the button
button.disabled = false;  // removes the attribute, enables it

Avoid setAttribute("disabled", false) — because the attribute is present, the element stays disabled. Set the property instead.

Custom Data Attributes

Developers can define custom attributes prefixed with data-, which is the standard, future-proof way to attach extra information to an element without inventing non-standard attributes. They are read and written through the dataset property instead of getAttribute.

The naming converts between kebab-case in HTML and camelCase in JavaScript: data-author becomes dataset.author, and data-order-status becomes dataset.orderStatus. You can also write to dataset to create or update the underlying data-* attribute.

Code Example: Custom Data Attributes

<!-- snippet: html-result -->

<div id="demo" data-author="Jane Doe" data-year="2022">Information Panel</div>
<br />
<div>author: <span id="1"></span></div>
<div>year: <span id="2"></span></div>
<script>
  const element = document.getElementById("demo");
  const span1 = document.getElementById("1");
  const span2 = document.getElementById("2");
  span1.innerHTML = element.dataset.author;
  span2.innerHTML = element.dataset.year;
</script>

Conclusion

Understanding the DOM's attributes and properties effectively lets you manipulate page elements dynamically and build richer, interactive applications. Remember the core distinction: attributes are the string values from your HTML source, while properties are the live, typed values on the DOM object — and a few attributes (value, href, boolean ones) deliberately keep the two apart.

To go further, explore these related chapters:

• Modifying the document — create, insert, and remove elements.
• Node properties: type, tag and contents — read and change element text and HTML.
• Working with styles in the DOM — manipulate CSS through style and className.

Practice