jQueryオブジェクト から元の DOMオブジェクト を得る

-- 最下部の追伸をご覧ください。 --

以前から $("#id") と取得した jQuerオブジェクト から、元の DOMオブジェクト はどうやって取得するんだろうか、と疑問に思っていたのですが、Understanding the Context in jQuery という記事を読んで、DOMオブジェクト の取得方法が分かったのでエントリー。

時々 context が元の DOMオブジェクト を示していたので、context の振る舞いを色々と試行錯誤していましたが、全然違うのでそれも含めて書き記しておきます。

何で context で取得できると勘違いしていたかは今はもう分かりませんが、そもそも context とは「n. 文脈; 背景, 情況.」 という意味で、 jQuery の第二引数 context に DOMオブジェクト を渡すと、そのオブジェクト以下を探索するように指示できます。

contextオプション のデフォルト値は document で、第二引数を使わなければ document を使います。 以下にテストコードを書いておきます。

   var jobj = $("#test_id"); // =>  jobj.context indicates document
   var jobj = $("#test_id", document.getElementById('test_id')); // => jobj.context indicates #test_id
   var jboj = $(document.getElementById('test_id')); // => jobj.context indicates #test_id

　一行目は contextオプション を指定せずに探索をさせます。
　　　context は document を示します。
　二行目は contextオプション に、そのIDの DOMオブジェクト を渡します。
　　　context は test_id の DOMオブジェクト を示します。
　三行目は context を使わず、selector に DOM オブジェクト 自体を渡してあげます。
　　　context は text_id の DOMオブジェクト を示します。

二行目と三行目の context は確かに元の DOMオブジェクト を指していますが、これは元オブジェクトを得るために使うものではありません。

元の DOMオブジェクト は jQueryオブジェクト に [0] をつけるだけで取得できます。

   var jobj = $("#test_id"); // => jobj.context indicates document
   alert(jobj[0].id) // oubput test_id

追伸: 2010-11-12

jQuery では元のオブジェクトを取得する get という関数があります [semooh.jp]