ホーム > カテゴリ > 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


この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
プチモンテ代表、アーティスト名：プチモンテ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ～

オリジナル曲を始めました✨

YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte

【男性ボーカル】DA・KA・RA | 新たな明日が風と共に訪れる

【男性、女性ボーカル】時空を超越する先に | 時空と風の交響曲

【女性、男性ボーカル】絆 | 穏やかな心に奏でる旋律