DOMオブジェクトとjQueryオブジェクトの相互変換

jQueryオブジェクト → DOMオブジェクト

getメソッドの戻り値を参照します。jQueryオブジェクトの集合に対してgetメソッドを実行するとDOM オブジェクトの配列が返されます。

id名で指定したときなど一つしかない場合は0番目を、クラス名で指定したときなど複数ある場合は、対応するインデックスを指定すれば変換されたDOMオブジェクトを取得できます。

var hoge = $('#hoge').get(0);

DOMオブジェクト → jQueryオブジェクト

$メソッドの戻り値を参照します。もっと端的な表現をすれば、$( )内に要素を入れます。

var hoge = document.getElementById('hoge');
var $hoge = $(hoge);

たとえばこんなとき ： jQueryで取得した座標がずれる

このような変換をして、どのようなときに有効なのでしょうか。

たとえば、DOMオブジェクトにしかないメソッド・プロパティ、jQueryオブジェクトにしかメソッド・プロパティを参照したいときに使用します。

ページ内スムーススクロールを実装する際、要素の座標を返すjQueryメソッドが正しい値を返さず、意図した場所とはズレた場所にスクロールしてしまいます。

jQueryのoffseメソッドはドキュメント上のX座標とY座標を返します。

var top  = $('#hoge').offset().top;
var left = $('#hoge').offset().left;

とても便利なメソッドですが、たまに間違った座標を取得して、まったく異なる場所にスクロールしてしまうことがありました。

そんなときはDOMオブジェクトのプロパティであるoffsetTopを使うと解消されます。

var hoge = document.getElementById('hoge');
var top  = hoge.offsetTop;
var left = hoge.offsetLeft;

もしも、すでにjQueryオブジェクトとして取得してしまっていた場合、DOMオブジェクトに変換することで正確な座標を取得できます。

var hoge = $('#hoge').get(0);
var pos = hoge.offsetTop;