I found something that is interesting, I write HTML almost every day, I’ve noticed the trick, but I haven’t had the chance, or motivation, to figure it out. Here’s the answer.

HTML attribute vs. DOM property

The HTML attribute and the DOM property are not the same thing, even when they have the same name..

For example, a simple input field may look like this:

1
<input type="text" value="Bob">

it creates a corresponding DOM node with a value property initialized to “Bob”.

When the user enters “Sally” into the input box, the DOM element value property becomes “Sally”. But the HTML value attribute remains unchanged as we discover if we ask the input element about that attribute:

1
input.getAttribute('value') // still returns "Bob"

The HTML attribute value specifies the initial value; the DOM value property is the current value.

The disabled attribute is another peculiar example.

A button’s disabled property is false by default so the button is enabled. When we add the disabled attribute, its presence alone initializes the button’s disabled property to true so the button is disabled.

Adding and removing the disabled attribute disables and enables the button. The value of the attribute is irrelevant, which is why we cannot enable a button by writing

1
<button disabled="false">Still Disabled</button>

Attributes initialize DOM properties and then they are done. Property values can change; attribute values can’t.

Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).