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

時としてjQueryオブジェクトじゃなくてDOMオブジェクトを使わないといけない時があります。
似ているものの、やっぱり若干違うのですよね。
が、もちろん相互変換可能です。



DOM→jQuery


こっちは楽。
ただ$()で挟むだけ。

console.log($(document.getElementById("test")).text());


jQuery→DOM


こっちは配列形式になるので、基本的には[0]をくっつければOKです。

console.log($("#test")[0].innerText);


が、クラスとかをセレクタにした場合当然ながら配列が返ってきますよね。
そういう場合はそのまんま配列でアクセスできます。
もちろんeq()で取ってからでもいいのですが。

// これは良い
console.log($(".test")[0].innerText);
// これでも取れる
console.log($(".test").eq(0)[0].innerText);


data属性とかを置き換える場合、jqueryだとキャッシュしてしまうので、DOMオブジェクトのsetAttributeを使う場合こんな感じに変換させましょうね。

Author Info(オガティ

エンジニアとして勤め、インフラ周りの開発を経た後Web業界へ異動。
プライベートでもブログ「ogatism」の運営や電子書籍の執筆、占星術師としての活動など幅広い分野で活動中。
詳細はこちら

占い鑑定レポート作成サービス受付中

◆ ogatismをFeedlyに登録 ◆
follow us in feedly