Question

我想知道当我们使用css selector时，浏览器如何找到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）或（p3，p1，p2）或其他因为html是一个dom树，浏览器可能会使用树遍历算法，它有5种（深度优先，前，中，后，广度）。所以，哪种算法是浏览器采取的。

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 - ＆gt; http://jsfiddle.net/RSEyf/3/

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

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

当我们使用css选择器时，浏览器如何查找集合元素

1 个答案: