javascript - 选择一组元素的最有效方法？

Question

我一直使用类名来选择相关元素集。例如

<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') ...

我这样做是因为我知道 jQuery 可以委托(delegate)给 document.getElementsByClassName，这应该非常快。但是，向我想要选择 但不是样式 的所有元素添加类似乎有点脏。当浏览器必须根据其样式表检查 checkbox_set_1 以确定我的复选框是否需要样式时，是否会有一些开销？另外，如果我没有很好地命名我的类，则存在意外样式的风险。

有没有更好的方法来选择不依赖于样式属性的元素，同时又不放弃性能优势？或者更具体地说，除了 class(用于样式化)和 id(仅限于单个元素)之外，浏览器是否会优化查询的属性？

还有许多其他属性可供选择，包括 data-* 属性，但我认为浏览器不会优化除 id 和 以外的任何内容的查找>类，是吗？

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?

样式不是这样确定的。浏览器不会获取元素的每个属性并查找适用的规则，而是浏览一次规则并确定哪些规则适用于该元素。

如果您关心向大量元素添加类，您可以使用能更好地利用文档结构的选择器，例如在包含复选框的元素上设置一个类并使用类似 $(' .CheckboxContainer :checked').

这可能不如在您想要定位的每个元素上设置类那么有效，但在大多数情况下，差异远不明显。在它成为实际问题之前，您不应该过多地关心高效选择器。毕竟，您使用 jQuery 是因为它方便，而不是为了获得最佳性能。