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


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:


And this is good:


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

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?

$('#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 -