jQuery는 DOM을 어떻게 통과합니까?

선택기를 사용할 때 jQuery가 DOM을 통과하는 방법에 대해 궁금합니다. 각 "첫 번째 수준"요소를 찾은 다음 각 요소를 살펴 봅니다. 아니면 그 "첫 번째 단계"요소의 모든 어린이를 하나씩 살펴 봅니까?jQuery는 DOM을 어떻게 통과합니까?

[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>

$("div p#target")

이 더 같이 진행 하는가 :

날 나는 다음과 같은 선택 주어진 몇 가지 빠른 예제와 함께 상상 설명해 보자

출처

2011-10-31 Pioul

jQuery를이 SizzleJS를 사용,이 질문에 대한 답변이 아니라 어쩌면 그 문서는 도움이 될 수 있습니다 : HTTP : // sizzlejs합니다. com/및 https://github.com/jquery/sizzle/wiki/Sizzle-Home – Thys

JQuery는 항상 지글 거리지 않습니다. 예를 들어,'$ ('# mydiv')'는'sizzle '을 사용하지 않을 것이다. 크롬과 파이어 폭스에서'$ ('. mydiv')'는 지글 거리지 않지만 IE <9에서는 사용합니다. – AlienWebguy

괜찮습니까? 그렇다면 어떻게 작동하는지 예측할 방법이 없습니다./ – Pioul

순회는 요소가 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>

이 "상위 1, 자식 1, 자식 2, parent2, child3, child4"경고합니다; 당신의 예에서

출처

2011-10-31 19:42:08 Kris

모든 알려진 브라우저에서? 무엇보다이 사람들이 말한 것을 보면 매우 일관된 것처럼 보입니다. 나는 결국 내 자신을 시도 할 수는 있지만 누가 이미 알고 있었는지 알 수 있습니다. D – Pioul

글쎄요, 그냥 Safari에서 TextMate를 바로 실행했지만, 문서의 모든 노드를 찾아야하므로 많은 의미가 있습니다. 다른 순서는 트리 순회를 구현하는 것이 더 어려울 수 있습니다. – Kris

사실 "만들기"가 무엇이든을위한 충분한 증거가 아니더라도, 그것은 진실하다. 일부 브라우저에서 스 니펫을 실행하고 우리가 잘못하면 여기로 돌아올 것입니다. – Pioul

당신이 그것을 통과하는 순서를 의미한다면, 나는 jQuery 자체가 아니라 실제 DOM 함수라고 가정합니다. 이것은 아마도 구현에 달려 있으며 아마도 (스펙에 정의되어 있지 않는 한) 그것에 의존하지 않을 것입니다.

그런 세부 사항을 알기 위해 무엇을하려 했습니까? 어쩌면 우리는 실제 문제를 해결할 수 있습니다.

출처

2011-10-31 19:35:31

순회는 문서 순서로 일어날 가능성이 높습니다. 깊이 우선 (OP의 다이어그램 2). – AKX

나는 특별한 문제에 직면하고 있지 않지만 jQuery를 광범위하게 사용하고 있으며 내부에서 작동하는 방식을 아는 것이 예를 들어 더 나은 선택기를 만드는 데 도움이 될 것입니다. 그것은 첫 번째 예제에서와 같이 작동한다면, 나는 오히려 첫 번째 div에 id를 부여하여 두 번째 것을 보지 않아도된다. – Pioul

, 나는 다음과 같이 처리 할 것입니다 희망 것 :

이

<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>

출처

2011-10-31 19:48:58 Eric

하하 그래, 그게 사실이야,하지만이 예제는 쇼를 위해, 나는 더 복잡한 DOM이 어떻게 될지에 관심이있다. – Pioul

jQuery는 DOM을 어떻게 통과합니까?

답변

관련 문제