jQueryオブジェクトとDOM要素を互いに変換する方法

JavaScriptで要素をオブジェクトとして扱う方法は主に次の2つです。

  • jQueryオブジェクト
  • DOM要素(DOM Element)

ライブラリを入れてjQuer内で要素を扱うときはjQueryオブジェクトが、

純粋なライブラリなしのJavaScript内で要素を扱うときはDOM要素が使われます。

そしてこの2つはある方法を使えば互いに変換することも可能です。

ということでjQueryオブジェクトとDOM要素の変換方法について解説

互いに変換する方法

ここでは

  • jQueryオブジェクト ⇒ DOM要素
  • DOM要素 ⇒ jQueryオブジェクト

に変換する方法についてコード例と一緒に紹介していきます。

jQueryオブジェクト ⇒ DOM要素

まず初めはjQueryオブジェクトからDOM要素に変換する方法

こちらはjQueryオブジェクトに対してget関数を呼び出すだけです。

 

例えば次はjQuery内で div.hoge  という要素を取得して、DOM要素に変換する例

$('div.hoge').get()  とすることでDOM要素の配列を取得できます。

 

またn番目にあるDOM要素を取得したいなら get(n- 1)  のようにインデックス番号を指定します。

例えば次は "main"  というIDを持つ要素を取得しているコード例

上のコードでは $('#main').get(0)  とすることで1番目の要素だけ取得しています。

IDを持つ要素や特定の場所の要素だけを取得する場合はこちらの方が便利ですね。

 

ちなみにですが、n番目のDOM要素を取得するなら次の方法も使用可能

jQueryオブジェクトに配列形式でアクセスしたり、at関数を使うことでもOKです。

 

以上がjQueryオブジェクトをDOM要素に変換する方法

get関数を使うことで面倒なことをしなくてもDOM要素を得ることができます。

DOM要素 ⇒ jQueryオブジェクト

お次は逆にDOM要素からjQueryオブジェクトに変換する方法

こちらはDOM要素をjQuery関数に渡すことでQuery化できます。

 

そのやり方は簡単で次の例のようにDOM要素を $()  で囲むだ

上のコードの $(dom)  のようにそのままDOM要素を渡すだけで変換してくれます。

ちなみに $  は jQuery  の省略なので jQuery(dom)  としてもOK

 

以上が DOM要素 ⇒ jQueryオブジェクト に変換する方法

こちらの方法はDOM要素をどうしても扱わないといけないときに役立つかもしれません。

ここまでのまとめ

ここまでで紹介した変換方法まとめ

  • jQueryオブジェクト ⇒ DOM要素
    $('.hoge').get()  のようにget関数を使えば要素の配列が返ってくる
    ちなみに $('.hoge').get(0)  のようにインデックス番号も指定可能
  • DOM要素 ⇒ jQueryオブジェクト
    $(dom)  のようにDOM要素をjQuery関数で囲むだけ
    ちなみに jQuery(dom)  という書き方でもOK

現在はjQuery主流なので互いに変換する場面は少ないかもしれません。

でもDOM要素でしか使えない関数やライブラリなどを使う場合、このような変換方法を知っておくとどこかで役に立つはずです。

 

以上jQueryオブジェクトとDOM要素を変換する方法についてでした。

ではでは・△・)ノ バイバイ