getElementById()でname属性が検索される？

JavaScript

getElementById()でname属性を検索してエレメントを取得できるという話を聞いた。
いや、絶対に推奨されている使い方ではないだろう。
そもそもIDはページ内でユニークだからgetElementById()はエレメントを返して、
複数設定できるname属性用にArrayオブジェクトElementオブジェクト（NodeListオブジェクト）
で返ってくる、getElementsByName()があるのだから。
でも、実際できるって聞いたし。
だから、調べてみた。

ほんとにとれるのか？

サンプルのHTML + JavaScriptを用意する。

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
  <head>
    <meta http-equiv="Contet-Type" content="text/html; charaset=TF-8"/>
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            alert(document.getElementById("txt1").value)
        }
    </script>
  </head>
  <body>    
    <input type="text" name="txt1" value="name"></input>
  </body>
</html>

結果

で、結果

OS ブラウザ スクリプト実行結果
WinXP IE7 nameと表示された
WinXP IE6 nameと表示された
WinXP FireFox2 スクリプトエラー
MacOS10.4 Safari3.1 スクリプトエラー

IEは取得可能のようだ、、、

では、同じ名前のIDとnameがあったら？

先ほどのソースに同じIDを追加して見る

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
  <head>
    <meta http-equiv="Contet-Type" content="text/html; charaset=TF-8"/>
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            alert(document.getElementById("txt1").value)
        }
    </script>
  </head>
  <body>    
    <input type="text" name="txt1" value="name"></input>
    <input type="text" id="txt1" value="id"></input>
  </body>
</html>

同じIDをnameより後にしてるのにするあたりがミソ。

そして結果

OS ブラウザ スクリプト実行結果
WinXP IE7 nameと表示された（え？）
WinXP IE6 nameと表示された（え？）
WinXP FireFox2 idと表示された（正常）
MacOS10.4 Safari3.1 idと表示された（正常）

IEはidとnameの両方をみてるっぽい。
そして、たちの悪いことに最初に見つけたのをとってきてるっぽい。

ほんとに最初をとってるのか？

idとnameをひっくり返して確認してみる。

さらに結果

OS ブラウザ スクリプト実行結果
WinXP IE7 idと表示された（正常）　
WinXP IE6 idと表示された（正常）　
WinXP FireFox2 idと表示された（正常）
MacOS10.4 Safari3.1 idと表示された（正常）

やっぱり最初をとってる、、、

まとめると

IEはgetElementById()はidとname属性両方を対象に検索して最初に見つかったものを
取ってくるようだ。
普通はやらないことだけど、idとnameは絶対に同じ名前はやめとこ。
name属性で検索するときはgetElementsByName()を使う。

取り扱いには十二分に気をつけよ。