jQuery入門講座使い方-jQueryとDOM要素

jQueryとDOM要素

概要

jQueryオブジェクトとDOM要素の互換性

前回のページでDOM要素であるthisを$( )を利用してjQueryに変換できると説明しましたが、jQueryオブジェクトをDOM要素に変換することもできます。正確にはjQueryオブジェクトの中にDOM要素が入っているので、jQueryオブジェクトからDOM要素を取り出すイメージになります。

解説

jQueryオブジェクトからDOM要素を取り出す

サンプル（dom/01.html）のソースを開いて、body内にbutton要素とdiv要素が5個あることを確認してください。これまでのサンプルと比べるとbutton要素が追加されています。

<button>click</button>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

jQueryは以下の様に記述されており、まず2行目に着目してください。$("div")によってdiv要素（5つ）がjQueryオブジェクトに変換されます。「概要」で説明したようにjQueryオブジェクトは配列のような構造を持っているため、配列アクセス演算子[ ]で中の要素にアクセスできます。

$("button").click(function(){
	myDOM = $("div")[0];
	myDOM.innerHTML = "XXXXX";
});

サンプルでは[0]としているので、最初のDOM要素を取り出して左辺の変数「myDOM」に代入しています。そして3行目でjavaScriptのinnerHTMLプロパティを利用してテキストを「XXXXX」に設定しています。
追記：2014.11/25：これまではinnerHTMLではなくinterTextを利用していましたが、これはfirefoxなどで利用できないためinnerHTMLに変更しました。

結果として、buttonをクリックすると最初のdiv要素のテキストに「XXXXX」が設定されます。この結果からjQueryオブジェクト内にDOM要素が格納されていることが確認できます。

DOM要素をjQueryオブジェクトに変換

前回のthis（DOM要素）を$( )を利用してjQueryオブジェクトに変換しましたが、再度確認しておきます。サンプル（dom/02.html）のソースを開いて、body内の構成がdom/01.htmlと同じ事を確認してください。

jQueryは以下の様に記述されており、2行目でjavaScriptのgetElementsByTagNameメソッドによってdiv要素のDOM要素を収集し左辺の変数「myDOM」に代入しています。そして3行目で$( )を利用してmyDOMをjQueryオブジェクトに変換しtextメソッドによってテキスト情報を「XXXXX」にします。

$("button").click(function(){
	myDOM = document.getElementsByTagName("div");
	$(myDOM).text("XXXXX");
});

結果として、buttonをクリックすると全てのdiv要素のテキストが「XXXXX」となります。
getElementsByTagNameメソッドは複数の要素に対応するため、マッチするDOM要素のリストを「配列」として返します。そのため全てのdiv要素のテキストが変更されました。

DOM要素を扱うことは少ないと思いますが、もし登場したら$( )を利用してjQueryオブジェクトに変換し、jQueryとして利用しましょう。

メモ

jQueryオブジェクトは配列ではありません

概要の図でjQueryオブジェクトは配列の「ような」と説明しています。これは全くの配列ではないためです。実際に配列にDOM要素を入れてもjQueryオブジェクトとしては扱えません。→サンプル（dom/test01.html）

$("button").click(function(){
	myDOM = document.getElementsByTagName("div");
	myJquery = [myDOM[0], myDOM[1], myDOM[2]];
	myJquery.text("XXXXX");
});

3行目でDOM要素を3つ設定した配列をmyJqueryとして作成していますが、4行目でmyJqueryにjQueryのtextメソッドを利用しても機能しません。jQueryオブジェクトは配列のような構造を持ちますが、配列ではありません。結果として、buttonをクリックしてもdiv要素のテキストは変更されません。

まだthisに関する説明は必要なのですが、次回は簡単な演出について説明します。
そこで学んだメソッドを利用して再びthisの話になります。

次のページ：簡単な演出