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?
What is the getAttribute() method? The getAttribute() method is declared in the WebElement interface, and it returns the value of the web element's attribute as a string. For attributes having boolean values, the getAttribute() method will return either true or null.
getAttribute() The getAttribute() method of the Element interface returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string); see Non-existing attributes for details.
The "getAttribute is not a function" error occurs for multiple reasons: calling the getAttribute method on a jQuery object instead of a DOM element. calling the method on an object that is not a valid DOM element. misspelling getAttribute (it's case sensitive).
The getAttribute() method is used to obtain the value of an attribute in an html document. In an html code, attribute and its value appear as a key value pair. Some of the commonly known html attributes are disabled, alt, id, href, style, title and src.
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:
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).
getAttribute('attribute')
normally returns the attribute value as a string, exactly as defined in the HTML source of the page.
However, element.attribute
could return a normalized or calculated value of the attribute. Examples:
<a href="/foo"></a>
<input type="checkbox" checked>
<input type="checkbox" checked="bleh">
<img src='http://dummyimage.com/64x64/000/fff'>
<img src='http://dummyimage.com/64x64/000/fff' width="50%">
<img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
<div style='background: lime;'></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With