getElementByIdのバグ検証

JavaScript

JavaScriptのgetElementByIdを使うと、ブラウザによってはバグが出て思う通りの挙動をしない事があります。
自分が遭遇したのはIEだけだったのですが、他のブラウザではどうなのかと思って検証してみました。


検証ブラウザ：FireFox 2、Internet Explorer 6、Opera 9.2、Windows版Safari 3.1


では、いってみましょう。
以下のようなHTMLソースがあるとします。

<html>
  <head></head>
  <body>
    <form action="test.cgi" method="post">
      <input type="checkbox" name="bug_search" />チェックボックス
    </form>
    <div id="bug_search">getElementByIdバグチェック</div>
  </body>
</html>

これに対して、以下のJavaScriptコードを実行します。

document.getElementById("bug_search").innerHTML = "書き換わりました";

上記を実行すると、"getElementByIdバグチェック" という文字列が "書き換わりました" という文字列に書き換わるはずです。


実際に各ブラウザで実行してみると、
FireFox、Windows版Safariではちゃんと "書き換わりました" という表示がされますが、IE、Operaでは何の反応も起きませんでした。
では、実際に何の要素を取ってきているのかとチェックしてみると、

FireFox、Windows版Safariでは、div要素(これが想定通り)、つまり↓

<div id="bug_search">getElementByIdバグチェック</div>

IE、Operaでは、input要素(これは想定外)、つまり↓

<input type="checkbox" name="bug_search" />

を取ってきています。
どうも、IE、Operaでは、input要素のname属性と何らかの要素のid属性が同じ名前だと勘違いするようです。まぁ確実にバグですね。
てゆうか、IEは分かってましたが、Operaもなるとは…。驚きです。そして早く直してください。


ちなみに、このバグを避けるには、input要素のname属性とid属性が同じ名前にならないようにするのが良いと思います。
が、どうしてもそれだとダメだと言う時は、以下のようにすればなんとかなります。

var divElements = document.getElementsByTagName("DIV");
for ( var i = 0; i < divElements.length; i++ ) {
    if( divElements[i].id == "bug_search" ) {
	divElements[i].innerHTML="書き換わりました";
	break;
    }
}

全てのdiv要素とってくれば何とかなるよ！って方法ですね。もっと良い方法はあるんでしょうか？
まぁ、こんな所です。

※ところで、Internet Explorer 7で、このバグは直っているんだろうか？