jQuery 是如何遍历 DOM 的？答案

【问题标题】：How does jQuery traverse the DOM?jQuery 是如何遍历 DOM 的？
【发布时间】：2011-12-19 00:17:09
【问题描述】：

我想知道当您使用选择器时 jQuery 是如何遍历 DOM 的。它是否查找每个“第一级”元素，然后查看每个元素？还是逐个查看那些“第一级”元素的每个子元素？

让我用一些简单的例子来解释我的想象，给定以下选择器：

$("div p#target")

是不是更像：

[1] <div>
    [3] <div>
        [5] <p id="target"></p>
        </div>
    </div>
[2] <div>
    [4] <div>
            <p></p>
        </div>
    </div>

或者喜欢：

[1] <div>
    [2] <div>
        [3] <p id="target"></p>
        </div>
    </div>
    <div>
        <div>
            <p></p>
        </div>
    </div>

【问题讨论】：

jQuery 使用 SizzleJS，它不是您问题的答案，但也许他们的文档可以帮助您：sizzlejs.com 和 github.com/jquery/sizzle/wiki/Sizzle-Home
JQuery 并不总是使用嘶嘶声。例如，$('#mydiv') 不会使用嘶嘶声。在 chrome 和 firefox 中，$('.mydiv') 不会使用 sizzle，但在 IE
好吧，没有可预测的方式知道它将如何工作：/
请看stackoverflow.com/questions/3177763/…。
@user704808 很有趣，但不是我的问题

标签： jquery

【解决方案1】：

遍历的顺序与元素在 DOM 中的顺序相同：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>query traversal order</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    </head>
    <body>
        <ul>
            <li id="parent1">
                <ul>
                    <li id="child1"></li>
                    <li id="child2"></li>
                </ul>
            </li>
            <li id="parent2">
                <ul>
                    <li id="child3"></li>
                    <li id="child4"></li>
                </ul>
            </li>
        </ul>
        <script type="text/javascript">
            // keep a list of ids
            var arr = [];
            // loop over all li elements
            $('li').each(function(){
                // add their id to the array
                arr.push($(this).attr('id'));
            });
            // show contents of the array
            alert(arr.join(', '));
        </script>
    </body>
</html>

这会提醒“parent1, child1, child2, parent2, child3, child4”；

【讨论】：

在每个已知的浏览器中？看看上面有人说的，这似乎不太一致。我最终可以自己尝试，但谁知道呢，也许你已经尝试过了：D
嗯，不，我只是在 Safari 中直接从 TextMate 运行它，但它很有意义，因为它必须找到文档中的所有节点。任何其他顺序都更难实现树遍历。
确实如此，尽管“有意义”并不足以证明任何事情。我会在某些浏览器中运行你的 sn-p，如果我们错了，我会回到这里。

【解决方案2】：

如果你指的是它通过它们的顺序，我假设这不是 jQuery 本身，而是实际的 DOM 函数。这可能取决于实现，我不会依赖它（除非它在规范中定义）。

你想完成什么才需要知道这些细节？也许我们可以帮助解决实际问题。

【讨论】：

遍历很可能指定为按文档顺序发生，即。深度优先（OP 中的图 2）。
我没有遇到任何特别的问题，但我正在广泛使用 jQuery，知道它在内部是如何工作的将有助于我制作更好的选择器。如果它像我的第一个例子一样工作，我宁愿给第一个 div 一个 id，这样它就不会费心看第二个了

【解决方案3】：

在您的示例中，我希望它会像这样处理：

<div> 
[2] <div>                   //check it matches the selector
    [1] <p id="target"></p> //document.getElementById is cheap
    </div>
</div>
<div>
    <div>
        <p></p>
    </div>
</div>

【讨论】：

哈哈是的，没错，但这个例子是为了展示，我对更复杂的 DOM 会发生什么很感兴趣