Best practice: class or data attribute as identifier

by

According to W3C

data-*

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
These attributes are not intended for use by software that is independent of the site that uses the attributes.

class

The class attribute has several roles in HTML: As a style sheet selector (when an author wishes to assign style information to a set of elements). For general purpose processing by user agents.

The bold text above is the autoritative assurance that it is ok to use class attribute without its definition in CSS. The warnings from VS 2012 about that are overzealous.

If you use class attribute, you can benefit from native getElementsByClassName searching (with O(1) time complexity) and classList object for toggling, adding and removing class. There’s nothing like getElementsByAttributeValue. There is relatively slower Element.querySelectorAll('[data-attr="value"]') ref See Oliver Moran’s comment. It has O(n) time complexity.

On the other hand, if you need to store multiple data, you can use dataset attribute. So if you want searching or if the data affect the look of the element, I would use class. If you need to store multiple data, the data would be more appropriate.

In your particular case I would consider required or pattern input attribute (since HTML5 most of input validation moved from JS to HTML). To style such elements, CSS selectors use the same syntax as querySelectorAll.

More Related Contents:

  1. How to store objects in HTML5 localStorage
  2. Invoking JavaScript code in an iframe from the parent page
  3. Capture HTML Canvas as gif/jpg/png/pdf?
  4. Adjust width and height of iframe to fit with content in it
  5. How to get numeric value from a prompt box? [duplicate]
  6. How to set value of input text using jQuery
  7. How do I get the information from a meta tag with JavaScript?
  8. getElementById() returns null even though the element exists [duplicate]
  9. How to display JavaScript variables in a HTML page without document.write
  10. javascript – shuffle HTML list element order
  11. How to dynamically create ‘@-Keyframe’ CSS animations?
  12. Check Ctrl / Shift / Alt keys on ‘click’ event
  13. Make anchor link go some pixels above where it’s linked to
  14. Text blinking jQuery
  15. How to mute all sound in a page with JS?
  16. How to resize html canvas element?
  17. Opening new window in HTML for target=”_blank”
  18. Nesting quotes in JavaScript/HTML
  19. jQuery vs document.querySelectorAll
  20. How to display div after click the button in Javascript? [duplicate]
  21. Looping through files for FileReader, output always contains last value from loop
  22. HTML5 callbacks?
  23. img onload doesn’t work well in IE7
  24. JavaScript: Get image dimensions
  25. Large dynamically sized html table with a fixed scroll row and fixed scroll column
  26. display HTML page after loading complete
  27. How did YouTube create a fluid video player?
  28. Add click event on div tag using JavaScript
  29. In JQuery, Is it possible to get callback function after setting new css rule?
  30. Decode HTML entity in Angular JS

Leave a Comment