getAttribute() versus Element object properties?
dom, html, javascript
Solution
`getAttribute` retrieves the attribute of a DOM element, while `el.id` retrieves the property of this DOM element. They are not the same.
Most of the time, DOM properties are synchronized with attributes.
However, the synchronization does not guarantee the same value. A classic example is between `el.href` and `el.getAttribute('href')` for an anchor element.
For example:
<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>
This behavior happens because according to the W3C, the href property must be a well-formed link. Most browsers respect this standard (guess who doesn't?).
There is another case for the `input`'s `checked` property. The DOM property returns `true` or `false` while the attribute returns the string `"checked"` or an empty string.
And then, there are some properties that are synchronized one-way only. The best example is the `value` property of an `input` element. Changing its value through the DOM property will not change the attribute (edit: check the first comment for more precision).
Because of these reasons, I'd suggest you keep using the DOM properties, and not the attributes, as their behavior differs between the browsers.
In reality, there are only two cases where you need to use the attributes:
- A custom HTML attribute, because it is not synced to a DOM property.
- To access a built-in HTML attribute, which is not synced from the property, and you are sure you need the attribute (for example, the original `value` of an `input` element).
If you want a more detailed explaination, I strongly suggest you read this page. It will take you a few minutes only, but you will be delighted by the information (which I summed up here).
Problem
Expressions like `Element.getAttribute("id")` and `Element.id` return the same thing. Which one should be used when we need attributes of an HTMLElement object? Is there any cross browser issue with these methods like `getAttribute()` and `setAttribute()`? Or any impact on performance between directly accessing object properties vs using these attribute methods?