スポンサーサイト





上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

  • Comments (Close): -
  • TrackBack (Close): -

オブジェクトの特定方法 (1)

  • Posted by: javascriptmania
  • 2011-05-19 Thu 20:27:48
  • DOM




DOMは、HTMLのオブジェクトを特定するための地図のようなものです。

以下のようなHTML文書を考えてみます。

<html>

<head> <title> </title>

</head>

<body>

<form>

<input type="text">
<input type="button" value="クリック">

</form>

</body>

</html>


「Hello」と書いてあるテキストボックスとボタンがあるだけの単純なHTMLファイルです。

20110519_3


ボタンをクリックするとテキストボックスの値(Hello)を取得してダイアログで表示するプログラムを書いてみます。

<html>

<head> <title> </title>

<script type="text/javascript">

function hello(){
var msg=document.forms[0].elements[0].value;
alert(msg);
}

</script>


</head>

<body>

<form>

<input type="text" value="Hello">
<input type="button" value="クリック" onclick="hello()">

</form>

</body>

</html>


ヘッダーで、hello()という関数を定義しています。ここでテキストボックスの値を取得し、ダイアログで表示します。

さらに、ボタンに onclick イベントハンドラを設定してhello()関数を呼び出します。

実行結果 :
20110519_4


ポイントは、テキストボックスの特定方法です。

document.forms[0].elements[0].value;

Webページの(document.)、0番目のフォームの(forms[0].)、0番目の要素の(elements[0].)、値(value)という具合です。

ちなみに、documentの上にはwindowがありますが、これは省略可能です。

関連記事

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/44-574a8ab2
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。