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") 또는 $ (". 색상")를 사용

우리는 세 가지 P 요소를 얻을 것이다. 내 질문은 이러한 요소를 찾는 순서입니다. html이 dom 트리이기 때문에 (p1, p2, p3) 또는 (p3, p1, p2) 또는 기타 브라우저는 5 가지 종류의 (depth-first, pre, in, post, 너비는 얼마입니까?) 그래서, 어떤 알고리즘을 사용하는 브라우저입니다.

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에서 자신의 순서로 요소를 가져옵니다 같은, 그것은 보인다.

그것은 당신이 단지 페이지 대신 .color를 사용하는 경우에도 동일합니다.