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

Author:

時として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を使う場合こんな感じに変換させましょうね。

Facebook にシェア
Pocket