Most efficient way to select a set of elements?

Question

I've always used class names to select sets of related elements. eg

<input type="checkbox" value="1" class="checkbox_set_1">
<input type="checkbox" value="2" class="checkbox_set_1">
<input type="checkbox" value="3" class="checkbox_set_1">

$('.checkbox_set_1').filter(':checked') ...

I do this because I know jQuery can delegate to document.getElementsByClassName which should be pretty fast. However, adding classes to all the elements I want to select but not style seems kind of dirty. Isn't there some overhead when the browser has to check checkbox_set_1 against its stylesheet to determine if my checkboxes need styling? Plus, there's some risk of accidental styling if I haven't named my classes nicely.

Is there a better way to select elements that doesn't rely on an attribute meant for styling, without giving up the performance benefits? Or more specifically, is there an attribute other than class (used for styling) and id (limited to a single element) that the browser will optimize queries for?

There are many other attributes to pick from, including data-* attributes, but I don't think the browser optimizes lookups on anything other than id and class , does it?

Answer 1

Isn't there some overhead when the browser has to check checkbox_set_1 against its stylesheet to determine if my checkboxes need styling?

Styling isn't determined that way. The browser doesn't take each attributes of an element and look for rules that apply, instead it looks through the rules once and determine which ones applies to the element.

If you are concerned with adding classes to a lot of elements, you can use selectors that make better use of the document structure, for example setting a class on the element containing the checkboxes and use something like $('.CheckboxContainer :checked') .

That might not be quite as efficient as setting classes on every element that you want to target, but in most cases the difference is far from noticable. You shouldn't bother too much about efficient selectors until it's an actual problem. After all, you are using jQuery because it's convenient, not to get the best performance.

Answer 2

Yes, it behaves analouge to the "Marker-Interface in java" and you will find the anti-pattern-description of Tom Butler .

If you have a form around, you could use elements (but you must filter other elements) this is faster than calling a method like "getElementsByClassName".

Example

 var lst = jQuery(document.foo.elements); document.write(lst.length); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="foo"> <input type="checkbox" value="1" /> <input type="checkbox" value="2" /> <input type="checkbox" value="3" /> <input type="checkbox" value="4" form="bar" /> </form>