getAttribute() versus Element object properties?

by

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="https://stackoverflow.com/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "https://stackoverflow.com/"
a.href // Full URL except for IE that keeps "https://stackoverflow.com/"
</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:

  1. A custom HTML attribute, because it is not synced to a DOM property.
  2. 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).

More Related Contents:

  1. Is there a spec that the id of elements should be made global variable?
  2. Check if an element contains a class in JavaScript?
  3. Changing CSS Values with Javascript
  4. Chrome extension – retrieving global variable from webpage
  5. innerText vs innerHTML vs label vs text vs textContent vs outerText
  6. Why is the value of my input always empty if I store it in a variable?
  7. Get selected option text with JavaScript
  8. How to convert a DOM node list to an array in Javascript?
  9. JavaScript DOM: Find Element Index In Container
  10. Is there a DOM event that fires when an HTML select element is closed?
  11. Is innerHTML asynchronous?
  12. Does the onchange event propagate?
  13. Change ‘s option and trigger events with JavaScript
  14. Is there any “on DOM change” event? [duplicate]
  15. Can I apply CSS to the elements within an iframe?
  16. Changing the order of elements
  17. createElement vs. createElementNS
  18. Why does getElementById not work on elements inside the document element? [duplicate]
  19. Jquery Event Not Triggering for DOM Elements Created after page load [duplicate]
  20. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  21. getElementsByClassName() with two classes
  22. Trying to set a span element equal to a variable value in a JS Rock, Paper, Scissors Game
  23. What is the difference between `firstChild` and `firstElementChild`?
  24. How can I remove wrapper (parent element) without removing the child?
  25. Why does
  26. How to properly unload/destroy a VIDEO element
  27. How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
  28. How to get element by class name
  29. Test if an element can contain text
  30. Replacement for deprecated `keypress` DOM event

Leave a Comment