IE7におけるgetElementByIdの不思議な挙動
フォームのinput要素のname属性とid属性は同じ値にしましょう
<input type="text" name="a" value="hello, world">
というHTMLがあって、次のようなjavascriptを書いたとする。
var elem = document.getElementById('a'); alert(elem ? elem.value : "aというidを持つ要素はありません");
当然aというidを持つ要素は無いわけだから画面には「aというidを持つ要素はありません」と出るはずなんだけど、これは「hello, world」と表示される。実際になった。何じゃこりゃ。
で、次にHTMLをこんな風にしてみた。
<input type="text" name="a" value="hello, world"> <input type="text" name="b" id="a" value="morning, world">
これで先ほどのjavascriptを実行してみると、、、なんと！また「hello, world」ってなった。ちょっとひどすぎでは。実はこれ、次のようにすると、初めてうまくいくのだ。
<input type="text" name="b" id="a" value="morning, world"> <input type="text" name="a" value="hello, world">
つまり、順序によって取れたり取れなかったりするってこと。はまりそうだ・・・
form要素にはname属性を定義するべきではない。
これは上の問題と大変似ているので、詳細は割愛する。
・・・ってあるんだけど、これはちょっとよく分からなかった。なんでだろう？
idに「description」という値は使うな
これも似たようなヤツです。
<head> <meta name="description" content="website description" /> ・・・ </head> <body> ・・・ <input type="text" name="a" id="description" value="hello, world"> ・・・
こんなhtmlがあったときに次のjavascriptを実行したとする。結果はどうなるか？
var elem = document.getElementById('description'); alert(elem ? elem.value : "aというidを持つ要素はありません");
「undefined」と表示されます。メタ要素が取得されてしまっているので、その要素にはvalueがないってのがその原因。メタ要素より先に書かれることも無いだろうからこれは常に「undefined」でしょうね。ちなみにこれはIE6でも起こるとありました。
・・・とまぁ、そういうことらしいです（閉口気味）。
もちろんfirefoxなどのブラウザなどでは期待したとおりの動きになります。IEなんて×××！！
