Understanding Relationships Between HTML Attributes & DOM Object’s Properties
When the web browser loads an HTML page, it generates the corresponding DOM objects based on the DOM nodes of the document.
For example, if a page contains the following input element:
<input type="text" id="username">Code language: JavaScript (javascript)
The web browser will generate an HTMLInputElement object.
The input element has two attributes:
- The
typeattribute with the valuetext. - The
idattribute with the valueusername.
The generated HTMLInputElement object will have the corresponding properties:
- The
input.typewith the valuetext. - The
input.idwith the valueusername.
In other words, the web browser will automatically convert attributes of HTML elements to properties of DOM objects.
However, the web browser only converts the standard attributes to the DOM object’s properties. The standard attributes of an element are listed on the element’s specification.
Attribute-property mapping is not always one-to-one. For example:
<input type="text" id="username" secured="true">Code language: JavaScript (javascript)
In this example, the secured is a non-standard attribute:
let input = document.querySelector('#username');
console.log(input.secured); // undefinedCode language: JavaScript (javascript)
Attribute methods
To access both standard and non-standard attributes, you use the following methods:
element.getAttribute(name)– get the attribute valueelement.setAttribute(name, value)– set the value for the attributeelement.hasAttribute(name)– check for the existence of an attributeelement.removeAttribute(name)– remove the attribute
element.attributes
The element.attributes property provides a live collection of attributes available on a specific element. For example:
let input = document.querySelector('#username');for(let attr of input.attributes) {
console.log(`${attr.name} = ${attr.value}` )
}
Code language: JavaScript (javascript)
Output:
type = text
id = username
secure = trueCode language: JavaScript (javascript)
Note that element.attributes is a NamedNodeMap, not an Array, therefore, it has no Array’s methods.
Attribute-property synchronization
When a standard attribute changes, the corresponding property is auto-updated with some exceptions and vice versa.
Suppose that you have the following input element:
<input type="text" id="username" tabindex="1">Code language: JavaScript (javascript)
The following example illustrates the change of the tabindex attribute is propagated to the tabIndex property and vice versa:
let input = document.querySelector('#username');// attribute -> property
input.setAttribute('tabindex', 2);
console.log(input.tabIndex); // 2
// property -> attribute
input.tabIndex = 3;
console.log(input.getAttribute('tabIndex')); // 3
Code language: JavaScript (javascript)
The following example shows when the value attribute changes, it reflects in the value property, but not the other way around:
let input = document.querySelector('#username');// attribute -> property: OK
input.setAttribute('value','guest');
console.log(input.value); // guest
// property -> attribute: doesn't change
input.value = 'admin';
console.log(input.getAttribute('value')); // guest
Code language: JavaScript (javascript)
DOM properties are typed
The value of an attribute is always a string. However, when the attribute is converted to the property of a DOM object, the property value can be a string, a boolean, an object, etc.
The following checkbox element has the checked attribute. When the checked attribute is converted to the property, it is a boolean value:
<input type="checkbox" id="chkAccept" checked> Acceptlet checkbox = document.querySelector('#chkAccept');
console.log(checkbox.checked); // true
Code language: JavaScript (javascript)
The following shows an input element with the style attribute:
<input type="password" id="password" style="color:red;with:100%">Code language: JavaScript (javascript)
The style attribute is a string while the style property is an object:
let input = document.querySelector('#password');let styleAttr = input.getAttribute('style');
console.log(styleAttr);
console.dir(input.style);
Code language: JavaScript (javascript)
Output:
[object CSSStyleDeclaration]Code language: JavaScript (javascript)
The data-* attributes
If you want to add a custom attribute to an element, you should prefix it with the data- e.g., data-secured because all attributes start with data- are reserved for the developer’s uses.
To access data-* attributes, you can use the dataset property. For example, we have the following div element with custom attributes:
<div id="main" data-progress="pending" data-value="10%"></div>Code language: JavaScript (javascript)
The following shows how to access the data-* attributes via the dataset property:
let bar = document.querySelector('#main');
console.log(bar.dataset);Code language: JavaScript (javascript)
Output:
[object DOMStringMap] {
progress: "pending",
value: "10%"
}Code language: JavaScript (javascript)
Summary
- Attributes are specified in HTML elements.
- Properties are specified DOM objects.
- Attributes are converted to properties respectively.
- Use the
element.attributesproperty to access standard and custom attributes of an element. - Use the
element.datasetproperty to access thedata-*attributes.