ホーム > カテゴリ > HTML5・JavaScript >

getElementByIdとgetElementsByNameのサンプル

私を含むJavaScriptの初心者の方はgetElementByIdとgetElementsByNameの違いがうろ覚えかと思います。本稿では単純明快なサンプルコードから理解できるようにしてみました。

getElementByIdとgetElementsByName

これだけ覚えれば直ぐに理解できます。

document.getElementById()は単体。
document.getElementsByName()は複数。

getElementById()はElement、getElementsByName()はElementsになっています。メソッド名にも英語で単体、複数と表現されています。

サンプル

あとはgetElementByIdとgetElementsByNameの違いのサンプルを見て頂ければ理解できると思います。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
<body>
  <input type="text" name="txtbox1" id="txtbox_id" value="テキスト" />

  <input type="checkbox" name="checkbox[]" value="checkbox1" id="checkbox1" /><label for="checkbox1">xml</label>
  <input type="checkbox" name="checkbox[]" value="checkbox2" id="checkbox2" /><label for="checkbox2">css</label>
  <input type="checkbox" name="checkbox[]" value="checkbox3" id="checkbox3" /><label for="checkbox3">javascript</label>

<script type="text/javascript">
   
    // IDによるオブジェクトの取得
    var input_id = document.getElementById('txtbox_id');
    console.log(input_id.value);       /* 出力:テキスト */
   
    // Nameによるオブジェクトの取得
    var input_name = document.getElementsByName('txtbox1');
    console.log(input_name[0].value);  /* 出力:テキスト */
        
    // Nameによるオブジェクトの取得
    input_name = document.getElementsByName('checkbox[]');
    console.log(input_name[0].value);  /* 出力:checkbox1 */
    console.log(input_name[1].value);  /* 出力:checkbox2 */
    console.log(input_name[2].value);  /* 出力:checkbox3 */
    
</script>
</body>
</html>




関連記事


前の記事：highlight.jsの使い方
次の記事：[OpenLayers]国土地理院の地図をブログやWEBサイトで使用する

公開日：2015年01月15日
記事NO：00116