The Fundamental Differences and Correlation Mechanisms Between HTML Attributes and DOM Properties

Conceptual Definitions and Basic Differences

During HTML source code writing, developers define attributes on HTML elements. When the browser parses this code, corresponding DOM node objects are created, and these objects possess properties. For instance, the HTML element <input type="text" value="Name:"> contains two attributes: type and value. After parsing, the browser generates an HTMLInputElement object with dozens of properties like accept, accessKey, checked, etc.

Analysis of Attribute Reflection Mechanisms

When a DOM node is created, many properties establish relationships with attributes of the same or similar names, but this is not a simple one-to-one correspondence. Consider <input id="the-input" type="text" value="Name:">; the corresponding DOM node includes properties such as id, type, and value.

The id property is a pure reflected property for the id attribute: reading the property reads the attribute value, and setting the property writes the attribute value. id does not modify or limit the value content.

The type property is a reflected property for the type attribute but not purely reflective. Reading the property reads the attribute value, and setting the property writes the attribute value, but only for known valid values. If <input type="foo"> is set, theInput.getAttribute("type") returns "foo", while theInput.type returns "text".

In contrast, the value property does not reflect the value attribute. It represents the current value of the input box. When a user manually changes the input content, the value property reflects this change. If the user inputs "John", then:

theInput.value // returns "John"

Whereas:

theInput.getAttribute('value') // returns "Name:"

The value property reflects the current text content inside the input box, while the value attribute contains the initial text content from the HTML source code's value attribute.

To obtain the current content of the text box, read the property. To know the initial value, read the attribute or use the defaultValue property, which is a pure reflection of the value attribute:

theInput.value                 // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue          // returns "Name:"

Synchronization Mechanisms and Special Cases

Many properties directly reflect their attributes (e.g., rel, id), some have slightly different names (e.g., htmlFor reflects the for attribute, className reflects the class attribute), and many reflect their attributes with restrictions or modifications (e.g., src, href, disabled, multiple).

Synchronization behavior between attributes and properties varies by specification. For the <input> element's value: updating the attribute updates the property (unless the user has already typed), and updates the visually displayed value (again, unless the user has typed). Updating the property never updates the attribute but always updates the value displayed in the browser.

Data Types and Naming Conventions

Attributes are always strings, whereas properties can contain other data types such as numbers, objects, or boolean values. For example, the <input> element's maxLength property accepts a number. When setting the maxlength attribute in HTML, it is set as a string (<input maxlength="5">), and the browser automatically converts it to a number when syncing to the maxLength property.

Property names always use camel case (e.g., formAction), while attributes are case-insensitive (formaction === FORMACTION === fOrMaCtIOn). The class attribute is renamed to className when used as a property, and data- attributes are stored in a special dataset property.

Boolean Attribute Characteristics

Certain attributes are known as "boolean attributes"; they are either present or not present, representing true or false. The checked attribute is boolean. If it is present at all, it is treated as true. The browser treats all the following examples the same, rendering a checked checkbox for each:

<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="true" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="maybe kinda sorta" />

To "turn off" a boolean attribute, it must be completely removed from the element using the <input> element's removeAttribute() or toggleAttribute() methods.

Custom Attributes and Non-Corresponding Cases

All officially documented attributes have corresponding properties, but developers can add custom attributes to HTML elements: <input custom-attribute="" />. Custom attributes do not have corresponding properties.

Conversely, some properties do not have corresponding attributes. For example, HTML elements have an innerHTML property but no innerHTML attribute.

Practical Guidelines

When writing HTML, it is best to use attributes (after all, properties cannot be used in HTML). When writing JavaScript, it is best to use properties, as this tends to be less verbose and easier to read. However, this is not an absolute rule; sometimes, it is necessary to choose based on specific circumstances.

Understanding the difference between attributes and properties is crucial for avoiding unexpected behavior and debugging. By mastering reflection mechanisms, data type differences, and synchronization behaviors, developers can manipulate DOM elements more effectively, enhancing the stability and performance of web applications.