jQueryオブジェクト↔DOMエレメントの変換方法

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。

仕事ではjQueryを使ったり、生JS（vanillaJS）を使ってみたりしてます。

そんな中、基本はvanillaで書いていてスポットの処理はjQueryメソッドで書きたい時があるんですが（頑張ってvanillaで書けよというお叱りは置いといて）、そんな時の豆知識。

jQueryメソッドはjQueryオブジェクトにしか使えない

今もJSに関しては初心者の域を出ておりませんが、それはもう超初心者の時はハマりがちなこの問題。

つまり、jQueryで用意されているメソッドは $(‘.hoge’) などのドルなんちゃらで取得したオブジェクトでないと使用できません（逆もまたしかり）。

const hoges = document.querySelectorAll('.hoge');
hoge.addClass('huga');
//これはエラー
//addClassはjQueryメソッド

const hoges = document.querySelectorAll('.hoge');
hoge.classList.add('huga');
//これはOK
//classList.addは生JSのメソッド

jQueryオブジェクトとDOMエレメントを相互変換する方法

では本題です。

まどろっこしい説明は置いといて、結論から。

DOMエレメント→jQueryオブジェクトに変換

$()で囲むだけでOK！

const hoges = document.querySelectorAll('.hoge');
$(hoges).addClass('huga')
//jQueryオブジェクトに変換した為、addClass(jQueryメソッド)が使える

jQueryオブジェクト→DOMエレメントに変換

複数の要素を取得する場合

get()メソッドでDOMエレメントの配列を取得

const hoges = $('.hoge');
hoges.get().forEach((hoge)=>{
  hoge.classList.add('fuga');
});
//.get()でDOMエレメントを配列で取得
//DOMエレメントに変換した為、.classList.add(生JSメソッド)が使える

単一の要素を取得する場合

get(0)関数の引数にインデックス番号を指定して取得

const hoges = $('.hoge');
hoges.get(0).classList.add('fuga');

$(‘hoge’)[0]などシンプルにインデックス番号で取得

const hoges = $('.hoge');
hoges[0].classList.add('fuga');

という感じです。

DOM→jQueryはドルかっこで囲むだけなのでカンタン。

jQuery→DOMエレメントの変換がちょっと注意ですね。

しかも↑でも記述しているように、複数要素への処理はforEachなどで処理してやんないとjQueryのようにいきません。

というわけで需要があるかは甚だ疑問ですが、豆知識でした。