document.getElementByIdでname取るな

概要
JavaScriptには、getElementById と getElementsByName という2つの関数が存在します。

名前の通りこれらは、idからエレメントを取得する関数と、nameから取得する関数です。

nameは同じページ内に同じ名前の要素が複数居ても良い為、getElementsと複数になっていますが、IDの方は必ず1ページに同名は1つというルールになっている為、getElementと単数になっています。

この関数のうち片方がIE6では、若干ユニークな動きをします。
実践
では、試しにこんなソースを書いてみましょう。


  <input type="text" id="aho" name="yes">
  <input type="text" id="yes" name="no">
  <input type="button" value="押す" onclick="alert(document.getElementById('yes').id)"><br>
見ての通り、idが「aho」（アホ）のテキストボックスとidが「yes」のテキストボックスがいます。nameは「yes」と「no」が入ってます。

ボタン押下時のonclick関数には、「IDがyesのエレメントのIDを表示する」という記述書いてあります。

コレを実行すれば、当然、「IDがyesのエレメントのID」、つまり「yes」がalertで表示されることになります。
サンプルコード現物
上のサンプルコードを下に表示してみると、こんな感じになります。



試しに押してみてください。まともなブラウザを使用してみれば、「yes」と表示されるはずです。IDが「yes」のIDを表示しろという命令なのに、他の値とか出たらそりゃ、びっくりですから。
まともなブラウザ（Firefox3.5）での実行例
Firefox3.5で実行すると、こんな結果がでます。

Firefox3.5での実行例
さて、次は期待のIE6の表示結果です。
既に結果は予想できていると思いますが、深呼吸してからお進みください。
ブラウザ界のアイドル、IE6での実行例
CSS使いのデザイナーさんたちから毎日素敵なファンレター（たぶん剃刀入り）をもらっているんじゃないかという噂も飛び交うブラウザ界のアイドル、IE6さんで実行するとこうなります。

Firefox3.5での実行例

アホだったー！！

お母さん、ごめんなさい、この子はアホでしたー
IDが「yes」の子を取ってきてって言ったのに、「aho」を取ってきてしまいましたー
IE6のgetElementByIdの挙動について（IE7も同じだったりする）
こういう時は、Microsoftの全てが分かるアカシックレコードこと、MSDNに話を聞いてみましょう。

http://msdn.microsoft.com/ja-jp/library/ms536437%28en-us,VS.85%29.aspx

上記URLにはこんな風に書いてあります。
In IE7 mode and previous modes, this method performs a case-insensitive match on both the ID and NAME attributes, which might produce unexpected results.

（IE7モードみたいな感じの時、このgetElementByIdは、大文字小文字かも判断しつつ、IDとNAMEの両方の属性を見てマッチするのを探していたりします）

If more than one element is found, getElementById returns the first object in the collection.

（1つ以上マッチする要素がある時は、最初の方にあるヤツを取ってきます）
どうやら、IE6と7では、idを取ってきてといった時に、気を利かせてnameも見てくれているようです。

一言で言ってしまえば、余計なお世話です。
get element by idって言ってるのだから、IDで取ってきてください。
結論
私たちは、IE6撲滅運動を応援します