What is happening behind .setAttribute vs .attribute=?

by

input.value is dot notation, it sets the value property of the input object.

It does in no way update any attributes, so trying to get an attribute with the same name will not return the updated value.

If for some reason you have to update the attribute, you would do 

input.setAttribute('value', 'new_value');

but you shouldn’t have to use that, as you generally should be working with the properties, not the attributes, and you’d set and get the value property, not the attribute.

An attribute in HTML is a key / value pair inside the opening and closing brackets, as in

<div attribute="attribute_value"></div>

In many cases such attributes will set the initial value of the underlying property, and the property is a named key with a value, that is attached to the internal model of an element, which is what we access with javascript, the object holding the model and data for the element.

Changing any of that objects keys or values does not change the HTML, only the internal representation of the element, the object. However, changing the HTML attributes will in some cases change the object representation of the element.

getAttribute gets the actual attributes from the HTML, not the properties, while element.value clearly accesses a named property in the object representing that element.

More Related Contents:

  1. Find list of strings that matches a pattern that start with a special character « and end with a special character »
  2. How does JavaScript handle AJAX responses in the background?
  3. window.location.href and window.open () methods in JavaScript
  4. How do you check if a JavaScript Object is a DOM Object?
  5. Way to ng-repeat defined number of times instead of repeating over array?
  6. innerText vs innerHTML vs label vs text vs textContent vs outerText
  7. How can I hide the Android keyboard using JavaScript?
  8. AngularJS sorting by property
  9. Deprecation warning in Moment.js – Not in a recognized ISO format
  10. How do I check if a cookie exists?
  11. Explain +var and -var unary operator in javascript
  12. How to join two JavaScript Objects, without using JQUERY [duplicate]
  13. When should I use return false in jquery function?
  14. Why cache jQuery objects?
  15. What is the elegant way to get the latest date from array of objects in client side?
  16. Is there anything that guarantees constant time for accessing a property of an object in JavaScript?
  17. Javascript onkeydown event fire only once?
  18. JavaScript setTimeOut doesn’t seem to work like I expect
  19. Display image from blob using javascript and websockets
  20. Node.js Alert Causes Crash
  21. Why is my function returning Promise { } [duplicate]
  22. Difference between $(“#id”).load and $.ajax?
  23. How do I implement hex2bin()?
  24. Combining two arrays to form a javascript object
  25. HTML5 Video duration without playing video
  26. Hiding address bar in all browsers [duplicate]
  27. Javascript Function and Form Name conflict
  28. Call Javascript onchange event by programmatically changing textbox value
  29. style.backgroundColor is an empty string in JavaScript
  30. javascript click event handler fires without clicking

Leave a Comment