Properties Vs Attributes in Javascript

We've all used properties and attributes in our code. But for a long time, I really didn’t understand the difference. In short, attributes set initial values, while properties reflect an element’s dynamic state after interaction or manipulation. Simple enough, but how does that relate to data-attributes? What about custom elements? Let’s take a deep dive and figure out the key differences.

Attributes vs. Properties

Attributes are Static, Properties are Dynamic

Attributes are defined in the HTML and serve as the initial state. However, once the page loads, JavaScript properties take over and can change independently.

<input id="myInput" type="text" value="Hello" />
<script>
  const input = document.getElementById("myInput");

  console.log(input.getAttribute("value")); // "Hello" (Attribute)
  console.log(input.value); // "Hello" (Property)

  input.value = "Goodbye";
  console.log(input.getAttribute("value")); // Still "Hello" (Attribute)
  console.log(input.value); // "Goodbye" (Property)
</script>

Changing input.value updates the displayed text but does not update the value attribute in the DOM. However, if you manually reset the form or use setAttribute(), the attribute will be restored.

Custom Elements & Observed Attributes

Built-in elements, like <input>, do not automatically sync properties with attributes. However, custom elements can listen for attribute changes using observedAttributes().

<script>
  class MyElement extends HTMLElement {
    static get observedAttributes() {
      return ["title"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
      console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);
    }
  }

  customElements.define("my-element", MyElement);
</script>

<my-element title="Hello"></my-element>

<script>
  const el = document.querySelector("my-element");
  el.setAttribute("title", "Updated Title");
  // Logs: "Attribute title changed from Hello to Updated Title"
</script>

This behavior is opt-in for custom elements, but not available for built-in ones. For example, changing input.value = "New" will not trigger an attribute change.

Attributes Live in the DOM, Properties Live in Memory

Attributes are stored in the DOM itself (setAttribute() modifies them). Properties are stored in JavaScript memory and may or may not sync with attributes.

<img id="logo" src="logo.png" />
<script>
  const img = document.getElementById("logo");
  console.log(img.getAttribute("src")); // "logo.png"
  console.log(img.src); // Full URL (e.g., "http://example.com/logo.png")

  img.src = "new-logo.png";
  console.log(img.getAttribute("src")); // Still "logo.png"
</script>

This happens because properties often represent computed values (like img.src expanding to an absolute URL).

Keeping Attributes & Properties in Sync

If you want to keep attributes and properties in sync, you need to explicitly update them.

<input id="syncInput" value="Initial" />
<script>
  const input = document.getElementById("syncInput");

  // Keep value attribute in sync with property
  input.addEventListener("input", () => {
    input.setAttribute("value", input.value);
  });
</script>

This ensures that when a user types, both the property (input.value) and attribute (value="...") remain updated.

How do Data Attributes Work?

Native elements provide specific attributes by default, such as the src attribute on an img or the type attribute on an input. However, you can also define your own custom attributes using the data- prefix, which is commonly referred to as "data attributes." These custom data attributes are accessible in both your CSS and JavaScript, providing a flexible way to store extra information.

Unlike the standard attributes like src or value, data attributes allow you to store custom data directly on HTML elements without affecting the rendering of the page. They’re especially useful for adding extra metadata or managing state within your app. Let’s see how they work in practice:

Example: Setting a Custom Data Attribute for Theming

Imagine you want to store the theme preference in your HTML element. Here's how you'd do it with a data attribute: 

<body data-theme="dark">
  <!-- Content -->
</body>

<script>
  // Get Data
  const theme = document.body.dataset.theme; // Note the use of dataset
  console.log(theme); // "dark"

  // Set Data
  document.body.dataset.theme = "light";
  console.log(document.body.dataset.theme); // "light"
</script>

In the example above, we added a data-theme attribute to the <body> tag. This attribute can be accessed in JavaScript via dataset.theme. Notice that when you access or set data attributes in JavaScript, you use the dataset object, which automatically converts data-* attributes into camelCase.

While data attributes are easy to use and versatile, it’s important to note that they should primarily be used for storing extra data that isn't critical to your page's layout or style. They help keep your HTML clean and provide a way to pass information around without cluttering the DOM or your CSS. I'll go into a deeper discussion on data attributes in a future article.

TL;DR

  • Attributes (set in HTML) provide the initial values.
  • Properties (set in JavaScript) represent the current state.
  • Changing a property does not update the attribute (unless manually synced).
  • Custom elements can observe attribute changes with observedAttributes().
  • Attributes live in the DOM, while properties live in JavaScript memory.
  • Data attributes (data-*) allow you to store custom data in HTML elements that are accessible in both CSS and JavaScript.

Understanding this distinction is key when working with forms, custom elements, or even React props vs. attributes. So next time you're debugging, be sure to check both—is it an attribute or a property?