スポンサーサイト





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

タグ :

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

Return to page top

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

getElementsByName()

  • Posted by: javascriptmania
  • 2011-05-19 Thu 21:35:52
  • DOM




name属性を利用してオブジェクトを特定する方法として、getElementsByName()メソッドを使う方法もあります。

getElementsByName( name )



このメソッドの使い方理解するために、以下のサンプルコードを見てください。

<html>

<head> <title> </title>

<script type="text/javascript">

function hello(){
var list=document.getElementsByName('mybox');
var msg=list.item(1);
alert(msg.value);

}

</script>


</head>

<body>

<a name="mybox"></a>

<form name="myform">

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

</form>

</body>

</html>


今回は、getElementsByName()メソッドの使い方を理解するために、INPUT要素(テキストボックス)のほかに A要素に「mybox」という同じ名前をつけました。

まず、

var list=document.getElementsByName('mybox');

の部分で、「mybox」という名前がついた要素をリストとして返します。

リストにするのは、「mybox」という名前の要素が一つとは限らないからです(実際、今回は2つあります)。このリストはノードリストと呼ばれます。

次に、

var msg=list.item(1);

の部分で、どの「mybox」なのかを特定します。この特定には、item() メソッドを使います。

今回は、2番目の mybox を返すために item(1) としています(0から始まるため)。

最後に、value属性を返してダイアログに表示します。

実行結果 :
20110519_4
関連記事

タグ :

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

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/46-5d191363
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。