Question

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

我要深入研究，看看我的代码效率如何;我敢打赌，其他人已经做到了这一点，并做得很好。

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

Answer 1

像这样。

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

或

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

参见此测试案例（通过统计数据看起来第一个选择器的速度是第二个选择器的14倍，选择器完全相同）
http://jsperf.com/test-selectorfidd123

想知道为什么？如果你使用第二个选择器，jQuery必须为每个元素遍历每个元素。如果你使用第一个，jQuery将会看到它将使用hyarchie的最高节点的root节点。并且不会遍历所有其他DIVS cus，这不是必要的。

几个月前我做了一些测试。如果您使用能够在CSS中运行的选择器。 jQuery能够使用本机库中的querySelector。但是如果你使用像:selected或:nth-child这样的特殊选择器，那么jQuery必须使用Javascript循环遍历这些元素。在这种情况下，最好做一些类似的事情:( jQuery将在第一部分使用querySelector而在.find使用JS

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

资料：
Attribute contains selector
Selector API

Answer 2

我认为今天有超过90％的浏览器使用本机代码支持document.querySelectorAll(..)和document.querySelector(..)。你应该可以使用：

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

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

Answer 3

取决于你的意思。如果你的意思是“优雅”，就像易读，那么尼尔斯是对的。如果你的意思是速度有效，那你就错误地使用了jQuery。

是的，提到的其他方法都有效，但它们可能是更好的方法。也许你的页面上只有十几个元素，没关系。但是当你有100或1000时，你会怎么做？搜索所有这些元素非常昂贵。

这是你应该问的问题：

这些元素是如何创建的？我怎么能在他们被创造的时候标记我以后需要的那些。

基于元素属性过滤dom树的最有效方法是什么？

3 个答案: