Javascript 使用css选择器时浏览器如何查找集合元素

我想知道当我们使用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>

我是p1
我是p2
我是p3

当我们使用$（“p”）或$（“.color”）时，我们将得到三个p元素。 所以，我的问题是找到这些元素的顺序。 （p1、p2、p3）或（p3、p1、p2）或其他

---

由于html是一个dom树，浏览器可能会使用树遍历算法，该算法有5种（深度优先、前、中、后、宽）。因此，浏览器采用哪种算法。

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

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);
}

var p=$（“.color”）；
对于（var i=0；iIt使用深度优先的预序遍历，如本文所述，是另一个链接，其中包含与浏览器内部相关的各种引用：