javascript - 根据元素的属性过滤 dom 树的最有效方法是什么？

Question

我一直在玩几个选项，包括 jQuery 过滤器和我自己的递归下降函数，到目前为止，我对我的结果并不满意。

我将深入研究，看看我可以如何高效地编写我的代码；不过，我敢打赌，其他人已经做到了这一点，并且做得很好。

那么，对我来说搜索 dom 树最有效的方法是什么？比如说，我想找到所有具有匹配 ( /.*google.*/)的 src 属性的元素

Answer 1

像这样的东西。

$("[src*='/google/']", "#rootnode")

或者

$("#rootnode [src*='/google/']")

查看这个测试用例（根据统计数据，第一个选择器的速度是第二个选择器的 14 倍，使用完全相同的选择器）
http://jsperf.com/test-selectorfidd123

想知道为什么？如果你使用第二个选择器，jQuery 必须循环遍历它可以找到的每个元素。如果您使用第一个，jQuery 将寻找root它将使用层次结构的最高节点的节点。并且不会遍历所有其他DIVScus 这不是必需的。

几个月前，我又做了一些测试。如果您使用能够在 CSS 中运行的选择器。jQuery 能够querySelector从本机库中使用。但是如果你使用像:selectedor这样的特殊选择器，:nth-child那么 jQuery 必须使用 Javascript 来循环遍历这些元素。在这种情况下，最好执行以下操作：（其中 jQuery 将querySelector用于第一部分，JS 用于.find

$("#native").find(":selected"); is faster than $("#native :selected");

信息：
属性包含选择器
Selector API

Answer 2

我认为今天超过 90% 的浏览器都支持原document.querySelectorAll(..)生document.querySelector(..)代码。您应该能够使用：

document.querySelectorAll('[src*="/google/"]');

这应该比从 JavaScript 代码本身编写的任何东西都要快。如果它也可用，jQuery 应该使用它。

Answer 3

取决于你所说的高效。如果您的意思是“优雅”，如易于阅读，那么 Niels 是对的。如果您的意思是在速度方面高效，那么您使用 jQuery 是错误的。

是的，提到的其他方法也可以，但它们可能是更好的方法。也许您的页面上只有十几个元素，这很好。但是当有 100 或 1,000 人时，你会怎么做？搜索所有这些元素非常昂贵。

这是你应该问的问题：

这些元素是如何创建的？在创建它们时，我如何标记我以后需要的那些。