javascript - 当我们使用 css 选择器时浏览器如何找到集合元素

Question

我想知道当我们使用 css 选择器时浏览器如何找到 html 集合元素。例如。

<div>
    <p class="color">I'm p1</p>
</div>
<div>
    <div>
        <p class="color">I'm p2</p>
    </div>
</div>
<p class="color">I'm p3</p>

当我们使用 $("p") 或 $(".color") 我们将得到三个 p 元素。所以，我的问题是找到这些元素的顺序。(p1,p2,p3) or (p3,p1,p2) or others 因为html是一棵dom树，浏览器可能使用树遍历算法，有5种(depth-first,pre,in,post,breadth) .所以，浏览器采用哪种算法。

Answer 1

在该特定用例中，您将获得：

I'm p1
I'm p2
I'm p3 

即使不使用 jQuery。

var p = $(".color");
for(var i=0; i<p.length; i++) {
    var el = p.eq(i);
    console.log(el.text());
}
console.log("test");
var p2 = document.querySelectorAll(".color");
for(var i=0; i<p2.length; i++) {
    var el = p2[i];
    console.log(el.innerHTML);
}

JSFiddle -> http://jsfiddle.net/RSEyf/3/

因此，看起来浏览器按照它们在 html 中的顺序获取元素。

即使您只使用p而不是.color也是一样的。