哪个是遍历 DOM 元素的更快方法？

Posted 2023-03-05

【中文标题】哪个是遍历 DOM 元素的更快方法？

【英文标题】：Which is the faster way to traverse a DOM element?

【发布时间】：2014-02-25 05:57:29

【问题描述】：

假设我有这样的标记：

    <div id="comment_box">
        <div class='comment'>
            <ul>
                <li class='comment_1'>
                    </li>
                <li class='comment_2'>
                    </li>
                <li class='comment_3'>
                    </li>
                <li class='comment_4'>
                    </li>
            </ul>
        </div>
    </div>

commentBox = $('#comment_box')

$('.comment_3', commentBox) 或 commentBox.find('.comment_3') 或任何其他更快的方法？

【问题讨论】：

jsperf.com/jquery-find-vs-context-sel

jsperf.com/jquery-find-vs-context-sel/38

结束如果你没有在100次循环中使用该函数，差异是非常微不足道的......虽然我更喜欢.find()

已经问过了，***.com/q/2342282/235710

【参考方案1】：

以下是我们在使用 JQuery 选择元素时需要牢记的几点：

1.选择选择器

选择好的选择器是提高 javascript 性能的一种方法。稍微具体一点——例如，在按类名选择元素时包括元素类型——可能会有很长的路要走。另一方面，过多的特异性可能是一件坏事。

选择器，例如

$('#comment_box .comment li.comment_3') 太过分了，

如果选择器如

$('#comment_box li.comment_3') 将完成工作。

jQuery 提供了许多基于属性的选择器，允许使用简化的正则表达式基于任意属性的内容进行选择。

尽可能使用 ID、类名和标签名进行选择。

2.保存选择

jQuery 不会为您缓存元素。如果您做出了可能需要再次进行的选择，则应将选择保存在变量中，而不是重复进行选择。

var commentBox = $('#comment_box');

在上面的示例中，变量名称以美元符号开头。与其他语言不同，JavaScript 中的美元符号没有什么特别之处——它只是另一个字符。在这里，它用于表示该变量包含一个 jQuery 对象。这种做法只是惯例，并不是强制性的。

一旦选择存储在变量中，您就可以在变量上调用 jQuery 方法，就像在原始选择中调用它们一样。

选择仅获取在进行选择时页面上的元素。如果稍后将元素添加到页面中，您将不得不重复选择或以其他方式将它们添加到存储在变量中的选择中。 DOM 更改时，存储的选择不会神奇地更新。

您可以参考链接http://learn.jquery.com/using-jquery-core/selecting-elements/了解更多详情

【讨论】：

"在上面的示例中，变量名称以美元符号开头。"你说的是美元符号？？在哪里？？？ ;)。不过答案很好。

【参考方案2】：

嗯，有多种方法。就我个人而言，我会这样做：

$("#comment_box .comment_3")

【参考方案3】：

通常，您越具体越好。比如：

$('#comment_box .comment li.comment_3')

【讨论】：

但是它不会遍历每个选择器吗？ 1. #comment_box 2. .comment 3. li.comment_3 如果我没记错的话。

其实jQuery是从右到左读取选择器的，所以通常越不具体越快。