getElementByIdとgetElementsByNameの違い

getElementByIdとgetElementsByNameってよく使い方を間違えます。（私だけかもですが。）
ということで、基本中の基本のgetElementByIdとgetElementsByNameの使い方をまとめてみます。
※「getElementByName」では無く「getElementsByName」だってところがちょっと重要です。

getElementByIdの基本的な使い方

getElementByIdの基本的な使い方は以下の通りです。

◆ document.getElementById(id) (D1/e5/N6/O6)
id 属性で指定した名前で要素を参照します。
oElement = document.getElementById("id1");
とほほのJavaScriptリファレンス - ドキュメントオブジェクトモデル（DOM）

「id 属性で指定した名前で要素」つまりは「単体の要素」を戻してくれます。

getElementsByNameの基本的な使い方

次にgetElementsByNameの基本的な使い方は以下の通りです。

◆ element.getElementsByName(name) (D1/e5/N6/O6)
name 属性で指定した名前で要素リストを参照します。
oElements = document.getElementsByName("namae");
oElements = oElement.getElementsByName("namae");
とほほのJavaScriptリファレンス - ドキュメントオブジェクトモデル（DOM）

「name 属性で指定した名前で要素リスト」つまりは「要素の配列(リスト)」を戻してくれます。

getElementByIdとgetElementsByNameの違いを票にするとこんな感じです。

	指定する名前	取得される値(オブジェクト)
getElementById	id属性	HTML要素(単体)
getElementsByName	name属性	HTML要素(リスト)

getElementByIdが単数形(Element)でgetElementsByNameが複数形(Elements)であることの理由は、取得される値が単体なのかリストなのかの違いということになります。

実際に試してみる - id/name共に重複要素がない場合

実際に以下のようなコードで動作を試してみます。
HTML要素として、「input type="text" name="name1" id="id1" value="value1"」を配置して、「getElementById」「getElementsByName」で使用して取得した値(オブジェクト)を「console.log」で出力させてみます。

サンプルコード

※IEやFirefox(Firebug無し)で動作させる場合、「console.log(…);」はコメントアウトして実行してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="utf-8">
  <title>getElementById/getElementsByNameサンプル | id/name共に重複要素がない場合</title>  
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript">
  <!--
  $(document).ready(function()
  {
    var id = document.getElementById('id1');
    console.log(id);
    alert(id.value); // -> 'value1'と表示される

    var name = document.getElementsByName('name1');
    console.log(name);
    alert(name.value); // -> undefined
    alert(name[0].value); // -> 'value1'と表示される
  });
  // -->
  </script>
  </head>
  <body>
    <input type="text" name="name1" id="id1" value="value1">
    <input type="text" name="name2" id="id2" value="value2">
  </body>
</html>

console.log(id);の出力結果

<input type="text" name="name1" id="id1" value="value1">

console.log(name);の出力結果

[ <input type="text" name="name1" id="id1" value="value1"> ]

「getElementById」で取得されたオブジェクトが単体であるのに対して、「getElementsByName」で取得されたオブジェクトの一番外側に「[」「]」が付加されており、リストであることを確認できました。

実際に「alert」でvalue値を参照してみると、「getElementById」で取得された方は「id.value」といった形式でvalue値を参照できますが、「getElementsByName」で取得された方は、「name.value = undefined」となっており、「name[0].value」のように参照しないとvalue値を参照できません。

alertで値を表示してみる

var id = document.getElementById('id1');
alert(id.value); // -> 'value1'と表示される

var name = document.getElementsByName('name1');
alert(name.value); // -> undefined
alert(name[0].value); // -> 'value1'と表示される

実際に試してみる - id/name共に重複要素がある場合

先程とほぼ同じですが、id/name属性の名前が重複している場合を試してみます。
コードは以下のような形で、「name="name1"」「id="id1"」の要素が重複しています。

サンプルコード

※IEやFirefox(Firebug無し)で動作させる場合、「console.log(…);」はコメントアウトして実行してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="utf-8">
  <title>getElementById/getElementsByNameサンプル | id/name共に重複要素がある場合</title>  
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript">
  <!--
  $(document).ready(function()
  {
    var id = document.getElementById('id1');
    console.log(id);
    alert(id.value); // -> 'value1'と表示される

    var name = document.getElementsByName('name1');
    console.log(name);
    alert(name.value); // -> undefined
    alert(name[0].value); // -> 'value1'と表示される
    alert(name[1].value); // -> 'value2'と表示される

  });
  // -->
  </script>
  </head>
  <body>
    <input type="text" name="name1" id="id1" value="value1"> <!-- id/nameが重複 -->
    <input type="text" name="name1" id="id1" value="value2"> <!-- id/nameが重複 -->
    <input type="text" name="name3" id="id3" value="value3">
  </body>
</html>

console.log(id);の出力結果

<input type="text" name="name1" id="id1" value="value1">

console.log(name);の出力結果

[ <input type="text" name="name1" id="id1" value="value1">, <input type="text" name="name1" id="id1" value="value2"> ]

先程と同じように「getElementById」で取得されたオブジェクトが単体であるのに対して、「getElementsByName」で取得されたオブジェクトの一番外側に「[」「]」が付加されており、リストであることを確認できました。
さっきと違うのは、「getElementById」の方はidが重複していても変わらず単体ですが、「getElementsByName」の方はnameが重複している2つの要素をリストで取得しています。
idが重複している状態で「getElementById」を使用した場合、「getElementById」ではHTMLとして先に記述されている要素を取得するようです。

これも実際に「alert」でvalue値を参照してみると、「getElementById」で取得された方は「id.value」といった形式でvalue値を参照できますが、「getElementsByName」で取得された方は、「name.value = undefined」となっており、「name[0].value」のように参照しないとvalue値を参照できません。
また今回「getElementsByName」で取得された方は、2つの要素を保持しているので、「name[1].value」で2つめの要素を参照することができます。

var id = document.getElementById('id1');
alert(id.value); // -> 'value1'と表示される

var name = document.getElementsByName('name1');
alert(name.value); // -> undefined
alert(name[0].value); // -> 'value1'と表示される
alert(name[1].value); // -> 'value2'と表示される

「名」は「体」を表す

今回改めて、getElementByIdとgetElementsByNameの違いをまとめてみて思ったのは「名は体を表す」ってことです。
分かりやすい名前(変数名/関数名/クラス名など)って大切ですね。

今回参考にしたページ

とほほのJavaScriptリファレンス - ドキュメントオブジェクトモデル（DOM）
http://www.tohoho-web.com/js/dom.htm