When to access the attribute (vs the property)?

by

Sometimes the attribute doesn’t map to changes in the property.

One example is the checked attribute/property of a checkbox.

DEMO: http://jsfiddle.net/mxzL2/

<input type="checkbox" checked="checked"> change me

document.getElementsByTagName('input')[0].onchange = function() {

    alert('attribute: ' + this.getAttribute('checked') + '\n' +
          'property: ' + this.checked);
};

…whereas an ID attribute/property will stay in sync:

DEMO: http://jsfiddle.net/mxzL2/1/

<input type="checkbox" checked="checked" id="the_checkbox"> change me

var i = 0;

document.getElementsByTagName('input')[0].onchange = function() {

    this.id += ++i;
    alert('attribute: ' + this.getAttribute('id') + '\n' +
          'property: ' + this.id);
};

And custom properties generally don’t map at all. In those cases, you’ll need to get the attribute.

Perhaps a potentially more useful case would be a text input.

<input type="text" value="original">

…where the attribute doesn’t change with changes from the DOM or the user.

As noted by @Matt McDonald, there are DOM properties that will give you the initial value that would reflect the original attribute value.

HTMLInputElement.defaultChecked
HTMLInputElement.defaultValue

More Related Contents:

  1. jQuery append function is just appending the html but not the classes related to it
  2. Why are inline event handler attributes a bad idea in modern semantic HTML?
  3. How to create a tag with Javascript?
  4. jQuery/JavaScript collision detection
  5. Navbar dropdown (collapse) is not working in Bootstrap 5
  6. What browsers support HTML5 WebSocket API?
  7. How to get current formatted date dd/mm/yyyy in Javascript and append it to an input [duplicate]
  8. How to validate inputs dynamically created using ng-repeat, ng-show (angular)
  9. JS function named `animate` doesn’t work in Chrome, but works in IE
  10. When is NodeList live and when is it static?
  11. How do I re-trigger a WebKit CSS animation via JavaScript?
  12. Bootstrap navbar Active State not working
  13. Change an image with onclick()
  14. Image loaded event in for ng-src in AngularJS
  15. How to make a simple image upload using Javascript/HTML
  16. Is it possible to programmatically detect size limit for data url?
  17. Session only cookies with Javascript
  18. jQuery sort elements using data id
  19. Why does getElementById not work on elements inside the document element? [duplicate]
  20. How to block pop-up coming from iframe?
  21. Make a instead of by pressing Enter on a contenteditable
  22. Is there a way to use the Web Audio API to sample audio faster than real-time?
  23. Drag-and-drop file upload in Google Chrome/Chromium and Safari?
  24. Print repeating Page headers in Chrome [closed]
  25. How to maintain page scroll position after a jquery event is carried out?
  26. document.createElement(‘script’) vs
  27. True Isometric Projection with HTML5 Canvas
  28. Jquery/Javascript Opacity animation with scroll
  29. JavaScript EventSource SSE not firing in browser
  30. Does jQuery strip some html elements from a string when using .html()?

Leave a Comment