Should I select DOM elements via id/class names or data attributes?

Question

A co-worker suggested to change our full JavaScript code to select DOM elements only via data attribute instead of id/class names.

He says, this is bad:

$('#foo')
$('.bar')

And this is good:

$('[data-foo]')

I didn't know that there is a benefit to this so I googled up a bit and found these two blog posts:

Contra data attributes: http://intuio.at/en/blog/dont-use-data-attributes-to-find-html-elements-with-js/
Pro: http://roytomeij.com/blog/2012/dont-use-class-names-to-find-HTML-elements-with-JS.html

Since these blog articles are just opinions of two developers I'd like to know what's the actual practical experience with this? Is there a real benefit to using data-attributes for DOM selection or is it a stupid idea?

my be this link help you http://ejohn.org/blog/html-5-data-attributes/ . he is creator of jquery — Nishit Maheta, Oct 27 '15 at 12:17
another good answer on stack overflow http://stackoverflow.com/questions/5032841/html5-custom-attributes-why-would-i-use-them — Nishit Maheta, Oct 27 '15 at 12:20
as far as i know searching based on data attributes takes longer than search based on id/class — madalinivascu, Oct 27 '15 at 12:27
Depends on context of what your code will be doing. Full dom search for data attributes will be slow, used as delegation targets however would be different — charlietfl, Oct 27 '15 at 12:32
I've just started converting my code base to work exactly like this and I love it. It's really up to you and your colleagues frankly. I say go for it! — Brad Evans, Oct 27 '15 at 13:03

score 3 · Accepted Answer · answered Oct 27 '15 at 12:49

3

$('#foo') is fastest, but with an id only ONE element can have the Id

$('.bar') is faster than data-attributes, but are messy because class usually is associated with css styling

$('[data-foo]') is the slowest (marginally) but is the least likely to interfere with other actions

speed test - http://jsperf.com/data-selector-performance

answered Oct 27 '15 at 12:49

stackoverfloweth

6,669
5
38
69

1

The speed differences you speak of are mostly a myth. They become real when you get into the multiple millions of possible nodes to select. Most people are not there. – Brad Evans Oct 27 '15 at 13:00
any answer to this question is going to be conjecture, there are no hard facts, just opinions and good coding practice – stackoverfloweth Oct 27 '15 at 13:15
Just as you did - I stated facts. These are facts. That is all. – Brad Evans Oct 27 '15 at 14:57

oshell · Answer 2 · 2015-10-27T13:03:19.230

Why You Should Use Data Attributes

If you use jQuery only, your whole logic will be bound to the DOM really closely. In big projects problems will occur. Your designer does probably think about a new naming convention and this will result in borken jQuery code. Lower performance is only a problem for a huge DOM or large amounts of selectors. Using data-attributes gives you a better seperation of styling and logic/controllers.

Why You Should NOT Use Data Attributes

jQuery itself was built for DOM manipulation mainly and therefore the tight bonding was somehow intended. Meaning the site was probably already built or designed and you want to manipulate it afterwards. If your focus is on architecture, test-driven development, maintenance and you want to achieve a better seperation of design and logic there are frameworks such as angularjs, which have indeed their own kind of data attributes (ng-directives). So there is probably a better choice if you want to think in terms of architecture.

Should I select DOM elements via id/class names or data attributes?

2 Answers2