jQueryはどのようにDOMをトラバースしますか？

セレクタを使用するときにjQueryがDOMをどのようにトラバースするのか不思議でした。 "第1レベル"の各要素を検索し、それぞれの中を見ますか？それとも、それらの「第1レベル」要素のすべての子どもを1つずつ見ていますか？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を使用しません。 chromeとfirefoxでは '$（ '。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、child1の、child2の、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を与えるので、それは2番目のものを見て気にしません – 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

hahaはい、それは本当ですが、この例はショーのためのものでした。もっと複雑なDOMで何が起こるかに興味があります – Pioul

jQueryはどのようにDOMをトラバースしますか？

答えて

関連する問題