DOMオブジェクトの基本操作 (1/5)
作成:2010-04-03 21:24
更新:2012-05-25 11:50
更新:2012-05-25 11:50
■基本の$ショートハンドとtext/htmlメソッド
jQueryにはさまざまな機能が用意されていますが、実を言えば、その多くは意外と地味なものです。ビジュアルな新しいインターフェイスをバーン！とページに表示するようなものは、ありません。（そうしたものは、jQuery UIという拡張ライブラリにまとめられてあります）
では、jQueryが提供するのはどういう機能なのか。それは、「いかにしてスクリプトをシンプルかつ効率的に書けるようにするか」ということを考えたものなのです。そのもっとも基本となるのが、DOMオブジェクト関係の機能です。
JavaScriptでは、DOMオブジェクトを操作することが非常に多いのですが、こうした場合、大抵はdocument.getElementByIdでエレメントを取得し、そのinnerHTMLを操作する、というようなやり方をすることになります。はっきりいって、面倒くさいです。
●$ショートハンド関数
では、jQueryではどうなるのでしょうか。jQueryでは、非常にシンプルな形でDOMオブジェクトを取り出すことができます。
●jQueryオブジェクトについてこれで得られるのは、実はエレメントではありません。「jQueryオブジェクト」という、jQueryの基本となるオブジェクトなのです。このjQueryオブジェクトは、エレメントの情報だけでなく、エレメントを操作するためのさまざまな仕掛けが組み込まれたオブジェクトです。このjQueryオブジェクトを取り出し、そこに用意されているメソッドを呼び出すことで、その要素を自在に操作できます。
●text/html/valメソッド
jQueryオブジェクトに用意されているメソッドのうち、要素に表示されている内容や、入力された値に関するメソッドを以下に整理しておきましょう。
text――その要素内に記述されているテキスト
html――その要素内に記述されているHTMLコード
val――その要素に設定されている値
例えば、<div>タグなどで、<div>～</div>内に書かれている内容は、textやhtmlメソッドでやり取りできます。textは、プレーンなテキストとして内容を扱い、htmlはHTMLのソースコードとして扱います。また、<input>タグのように値を設定するものは、valメソッドでその値をやり取りできます。
これらのメソッドの大きな特徴は、「１つのメソッドで、値の取得と変更の両方ができる」という点です。引数なしでこれらを呼び出せば値が取り出され、引数に値を渡して呼び出せばその値が変更されるのです。
※利用例
実際の簡単な利用例を下のリストに掲載しておきましょう。テキストを入力し、ボタンをクリックすると、表示されているメッセージが変わります。ボタンのonclickで呼び出されいてるdoAction関数を見てください。入力フィールドから値を取り出し、それを使って<div>タグにメッセージを表示する処理を、以下のように行なっています。
では、jQueryが提供するのはどういう機能なのか。それは、「いかにしてスクリプトをシンプルかつ効率的に書けるようにするか」ということを考えたものなのです。そのもっとも基本となるのが、DOMオブジェクト関係の機能です。
JavaScriptでは、DOMオブジェクトを操作することが非常に多いのですが、こうした場合、大抵はdocument.getElementByIdでエレメントを取得し、そのinnerHTMLを操作する、というようなやり方をすることになります。はっきりいって、面倒くさいです。
●$ショートハンド関数
では、jQueryではどうなるのでしょうか。jQueryでは、非常にシンプルな形でDOMオブジェクトを取り出すことができます。
$( オブジェクトの指定 )たったこれだけです。()内に、取り出したい要素のIDや名前などを記述すれば、これだけでその要素に対応するオブジェクトが取り出されます。一般に、オブジェクトはIDを指定して取り出しますが、この場合には、'#ID名'というように、IDの前に#記号をつけて記述します。例えば、id="helo"というように指定した要素のオブジェクトを取得するならば、$('#helo')とするだけです。
●jQueryオブジェクトについてこれで得られるのは、実はエレメントではありません。「jQueryオブジェクト」という、jQueryの基本となるオブジェクトなのです。このjQueryオブジェクトは、エレメントの情報だけでなく、エレメントを操作するためのさまざまな仕掛けが組み込まれたオブジェクトです。このjQueryオブジェクトを取り出し、そこに用意されているメソッドを呼び出すことで、その要素を自在に操作できます。
●text/html/valメソッド
jQueryオブジェクトに用意されているメソッドのうち、要素に表示されている内容や、入力された値に関するメソッドを以下に整理しておきましょう。
text――その要素内に記述されているテキスト
html――その要素内に記述されているHTMLコード
val――その要素に設定されている値
例えば、<div>タグなどで、<div>～</div>内に書かれている内容は、textやhtmlメソッドでやり取りできます。textは、プレーンなテキストとして内容を扱い、htmlはHTMLのソースコードとして扱います。また、<input>タグのように値を設定するものは、valメソッドでその値をやり取りできます。
これらのメソッドの大きな特徴は、「１つのメソッドで、値の取得と変更の両方ができる」という点です。引数なしでこれらを呼び出せば値が取り出され、引数に値を渡して呼び出せばその値が変更されるのです。
※利用例
実際の簡単な利用例を下のリストに掲載しておきましょう。テキストを入力し、ボタンをクリックすると、表示されているメッセージが変わります。ボタンのonclickで呼び出されいてるdoAction関数を見てください。入力フィールドから値を取り出し、それを使って<div>タグにメッセージを表示する処理を、以下のように行なっています。
var str = $('#text1').val();
$('#message').text('あなたは、"' + str + '"と書きました。');実にシンプル！ document.getElementById……などと書くのに比べ、非常に単純でわかりやすくスクリプトを記述できることがよくわかるでしょう。(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
function doAction(){
var str = $('#text1').val();
$('#message').text('あなたは、"' + str + '"と書きました。');
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div id="message">テキストを入力：</div>
<input type="text" id="text1">
<input type="button" onclick="doAction();" value="Click">
</body>
</html>
※関連コンテンツ