ZAPAnet総合情報局 > ZAPAブログ2.0 > ニュータイプなjQueryその3-HTML要素アクセス

ニュータイプなjQueryその3-HTML要素アクセス

2007年12月23日 プログラミングTIPS
前回、「ニュータイプなjQueryその2-jQuery導入方法」として、jQueryの導入方法を解説しました。
今回は、「ニュータイプなjQueryその3」として、jQueryを利用してHTML要素にアクセスする方法を解説をします。
興味を持ったら、簡単なサンプルを作って、とにかく自分の手で動かしてみることが大切です。

HTMLのtag,id,classについて

HTML要素へのアクセスを解説する前に、HTMLのtag,id,classについて簡単に説明しておきます。
HTMLは、複数のHTML要素が入れ子になって構成されています。
以下のHTMLタグと呼ばれるtagを利用します。
h1,p,div
など
このタグには、識別したり操作するためのidやclassを設定することができます。
<h1 id="type1">[Z]ZAPAブロ～グ2.0</h1>
<p class="type2">ZAPAnet総合情報局管理人ZAPAのブログです。</p>
<div class="type2">最近興味があることは、Adobe AIRです。</div>
など
idとclassの違いを簡単に説明すると
  • id：同じIDは1ページに1つだけしか利用できない
  • class：同じclassを1ページに複数回利用できる
という違いがあります。
1ページに同じidが2つ存在するのは間違いですが、同じclassが2つあっても問題ありません。

idやclassを付けておくと、CSSでスタイルを指定したり、JavaScriptからアクセスできるようになります。

JavaScriptでHTML要素にアクセスする方法

tagにidを付け、そのidにアクセスしたい場合があるとします。
例えば、次のようなHTMLのID:contentにアクセスする場合を考えます。 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無題ドキュメント</title>
</head>
<body>
<div id="content">
test
</div>
</body>
</html>
この時、ID:contentにアクセスするには、JavaScriptを使って、
document.getElementById("content")
などとしてアクセスします。
HTMLファイル内の1つしか存在しないidにアクセスするだけの割には、やや面倒な書き方と言えます。
しかも、tagにアクセスしたり、classにアクセスしたり、AjaxでXMLHTTPRequestを使おうとすると、さらに面倒なことになります。

これらの問題点を簡単にするには、Ajaxライブラリを利用するのが最適です。
次に、jQueryを利用したHTML要素へのアクセス方法を解説します。

jQueryでHTML要素にアクセス


jQueryでHTML要素にアクセスするには、$()関数を利用します。
jQueryを使えば、「document.getElementById」などと書く必要はなく、$()と書くだけでOKです。
$()だけなので、覚えるのがとても簡単です。
$()関数は，CSSの指定と同じように利用できます。（CSSスタイルのほか、XPathによる指定もできます）

次のページに、jQueryを利用したHTML要素アクセスのサンプルページを作りました。 解説は、このブログの以下に続きます。

idにアクセス

HTMLでは、tagにidやclassを設定することができることは前述したとおりです。
1ページに1度しか使えないidにアクセスするには、$()関数を利用し、ID名の前に#を付けてアクセスします。
さらに、そのIDの内容をtextで設定するには、次のようにします。
//IDにアクセス(ID名の前に#を付けてアクセス)
$("#result1").text("<strong>ID:result1を書き換え</strong>");
$("#result1")の部分で、ID:result1にアクセスし、text()メソッドでtextを設定しています。

また、IDの内容をhtmlで設定するには、次のようにします。 
$("#result1").html("<strong>ID:result1を書き換え</strong>");
$("#result1")の部分で、ID:result1にアクセスし、html()メソッドでhtmlタグを含んだ状態で設定しています。

動作サンプルは次のようになります。
ボタンをクリックしてみてください。
ID:result1を書き換え
ID:result2を書き換え
ID:result1
ID:result2
上のボタンは、HTMLタグをそのままテキストとして表示し、下のボタンはHTMLタグを解釈して表示しています。

jQueryを利用すれば、$()関数でidを簡単に操作することができます。

classにアクセス

次に、1ページに何度でも使えるclassにアクセスする方法を解説します。
classへのアクセスも、idへのアクセスと同じように$()関数を利用します。
class名の前に.を付けてアクセスします。
さらに、そのclassの内容をtextで設定するには、次のようにします。
//classにアクセス(class名の前に.を付けてアクセス)
$(".main").text("<strong>すべてのclass:mainを書き換え</strong>");
$(".main")の部分で、class:mainにアクセスし、text()メソッドでtextを設定しています。

また、classの内容をhtmlで設定するには、次のようにします。 
$(".main").html("<strong>すべてのclass:mainを書き換え</strong>");
$(".main")の部分で、class:mainにアクセスし、html()メソッドでhtmlタグを含んだ状態で設定しています。

動作サンプルは次のようになります。
ボタンをクリックしてみてください。
すべてのclass:mainを書き換え
すべてのclass:mainを書き換え
class:main
class:もうひとつmain
上のボタンは、HTMLタグをそのままテキストとして表示し、下のボタンはHTMLタグを解釈して表示しています。
複数回利用されているclassすべてに適用できることが確認できるはずです。

jQueryを利用すれば、$()関数でclassを簡単に操作することができます。

tagにアクセス

次にHTMLを構成するtagにアクセスする方法を解説します。
tagへのアクセスも、idやclassへのアクセスと同じように$()関数を利用します。
tag名でそのままアクセスします。
さらに、そのtagの内容をtextで設定するには、次のようにします。
//tagにアクセス(tag名だけでアクセス可能)
$("p").text("<strong>すべてのpタグを書き換え</strong>");
$("p")の部分で、tag:pにアクセスし、text()メソッドでtextを設定しています。

また、tagの内容をhtmlで設定するには、次のようにします。 
$("p").html("<strong>すべてのpタグを書き換え</strong>");
$("p")の部分で、tag:pにアクセスし、html()メソッドでhtmlタグを含んだ状態で設定しています。

動作サンプルは次のようになります。
ボタンをクリックしてみてください。
すべてのpタグを書き換え
すべてのpタグを書き換え

tag:p

tag:もうひとつp
上のボタンは、HTMLタグをそのままテキストとして表示し、下のボタンはHTMLタグを解釈して表示しています。
ページ内のpタグすべてに適用できることを確認できます。

jQueryを利用すれば、$()関数でtagを簡単に操作することができます。

id内のclassやtagにアクセス

もっと細かく、id内のclassやtagにアクセスしたいことがあります。
jQueryでは、それさえも簡単に実現することができます。
特定id内のclassのアクセスも、ほかと同じように$()関数を利用します。
さらに、そのtagの内容をtextで設定するには、次のようにします。
//id内のclassやtagにアクセス
$("#content1 .main").text("<strong>ID:result1内のclass:mainを書き換え</strong>");
$("#content1 .main")の部分で、ID:content1のclass:mainにアクセスし、text()メソッドでtextを設定しています。

また、tagの内容をhtmlで設定するには、次のようにします。 
$("#content1 p").html("<strong>ID:result1内のpタグを書き換え</strong>");
$("#content1 p")の部分で、ID:content1のtag:pにアクセスし、html()メソッドでhtmlタグを含んだ状態で設定しています。

動作サンプルは次のようになります。
ボタンをクリックしてみてください。
ID:content1内のclass:mainを書き換え
ID:content1内のpタグを書き換え
class:main

tag:p
上のボタンは、HTMLタグをそのままテキストとして表示し、下のボタンはHTMLタグを解釈して表示しています。
id内のclassやtagに適用できることを確認できます。

jQueryを利用すれば、$()関数でid内のclassやtagを簡単に操作することができます。

ほかの要素の内容をコピー

jQueryでid,class,tagにアクセスするし、内容を設定する方法は以上の通りです。
時によっては、ほかの要素の内容を読み取り、そのまま設定したいことがあります。
ほかの要素の内容を読み取るには、text()メソッドやhtml()メソッドの引数を空にして実行します。
ほかの要素の内容をtextで設定するには、次のようにします。
//ほかの要素の内容をコピー
$("#content2 .main").text($("#content1 .main").text());
text($("#content1 .main").text())の部分で、id:content1のclass:mainにアクセスし内容を取得しています。
その内容をtext()メソッドで$("#content2 .main")にtextで設定しています。

また、ほかの要素の内容をhtmlで設定するには、次のようにします。 
$("#content2 .main").html($("#content1 p").html());
html($("#content1 p").html())の部分で、id:content1のtag:pにアクセスし内容を取得しています。
その内容をhtml()メソッドで$("#content2 .main")にhtmlで設定しています。

動作サンプルは次のようになります。
ボタンをクリックしてみてください。
ID:result1内のclass:mainをID:result2内のclass:mainに貼り付け
ID:result1内のpタグをID:result2内のclass:mainに貼り付け
class:main
上のボタンは、HTMLタグをそのままテキストとして表示し、下のボタンはHTMLタグを解釈して表示しています。
ほかの要素の内容をコピーできることを確認できます。

jQueryを利用すれば、$()関数でほかの要素の内容を簡単にコピーすることができます。

今回のまとめ

今回は、jQueryの導入方法とHTML要素にアクセスする方法を解説をしました。
$()関数だけ覚えておけば、tag,id,classに簡単にアクセスすることができます。
jQueryには、ほかにもたくさんの機能がありますが、これだけでもjQueryを導入するだけの価値があります。

すべてのサンプルは、
のページで動作させることができます。
実行速度なども体験してみてください。

また、今回の内容は、公式ドキュメントMain Page - jQuery JavaScript Libraryの
辺りに詳しい解説があります。
もっと詳しく知りたい場合は参考にしてみてください（ただし英語ですが）。

続き

次回からは、CSS操作、Ajax、イベント、jQueryエフェクトなどの解説をする予定です。
お楽しみに。
←一つ前の記事へ