JavaScriptで要素をオブジェクトとして扱う方法は主に次の２つです。
- jQueryオブジェクト
- DOM要素(DOM Element)
ライブラリを入れてjQuer内で要素を扱うときはjQueryオブジェクトが、
純粋なライブラリなしのJavaScript内で要素を扱うときはDOM要素が使われます。
そしてこの２つはある方法を使えば互いに変換することも可能です。
ということでjQueryオブジェクトとDOM要素の変換方法について解説
互いに変換する方法
ここでは
- jQueryオブジェクト ⇒ DOM要素
- DOM要素 ⇒ jQueryオブジェクト
に変換する方法についてコード例と一緒に紹介していきます。
jQueryオブジェクト ⇒ DOM要素
まず初めはjQueryオブジェクトからDOM要素に変換する方法
こちらはjQueryオブジェクトに対してget関数を呼び出すだけです。
例えば次はjQuery内で div.hoge という要素を取得して、DOM要素に変換する例
|
1 2 3 4 |
$(function(){ /** jQueryオブジェクトからDOM要素に変換 */ var doms = $('div.hoge').get(); }); |
$('div.hoge').get() とすることでDOM要素の配列を取得できます。
またn番目にあるDOM要素を取得したいなら get(n- 1) のようにインデックス番号を指定します。
例えば次は "main" というIDを持つ要素を取得しているコード例
|
1 2 3 |
$(function(){ var dom = $('#main').get(0); }); |
上のコードでは $('#main').get(0) とすることで１番目の要素だけ取得しています。
IDを持つ要素や特定の場所の要素だけを取得する場合はこちらの方が便利ですね。
ちなみにですが、n番目のDOM要素を取得するなら次の方法も使用可能
|
1 2 3 4 5 |
/** 配列形式でアクセスして変換 */ var dom = $('.hoge')[n - 1]; /** at関数を使って変換 */ var dom = $('.hoge').at(n - 1); |
jQueryオブジェクトに配列形式でアクセスしたり、at関数を使うことでもOKです。
以上がjQueryオブジェクトをDOM要素に変換する方法
get関数を使うことで面倒なことをしなくてもDOM要素を得ることができます。
DOM要素 ⇒ jQueryオブジェクト
お次は逆にDOM要素からjQueryオブジェクトに変換する方法
こちらはDOM要素をjQuery関数に渡すことでQuery化できます。
そのやり方は簡単で次の例のようにDOM要素を $() で囲むだ
|
1 2 3 4 5 6 7 |
window.onload = function(){ /** 変換したいDOM要素オブジェクト */ var dom = document.getElementById('main'); /** DOM要素をjQueryオブジェクトに変換 */ var jobj = $(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要素を変換する方法についてでした。
ではでは･△･)ﾉ ﾊﾞｲﾊﾞｲ
