次の Javascript を含む HTML ドキュメントは IE8 でも Chrome でも正しく動作する。
すなわち、表示される 2 つのボタンのどれをクリックしても "id" と表示される。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
<script>
function func(){
alert(id1.value);
}
</script>
</head>
<body>
<input name="name1" type="button" value="name" onclick="func()">
<input id="id1" type="button" value="id" onclick="func()">
<script>
id1 = document.getElementById("id1");
</script>
</body>
</html>
試してみる
ところがつぎのように
name="id1"と変更した場合には IE が紛れる。Chrome は正しく、どちらのボタンでも "id" と表示されるのたが、IE では "undefined" と表示される。Net で
IE javascript getElementByIdのキーワードでググると、なんと多くの記事が見つかる事か... それらは name 属性と混在した場合の IE の馬鹿げた動作を告発している。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
<script>
function func(){
alert(id1.value);
}
</script>
</head>
<body>
<input name="id1" type="button" value="name" onclick="func()">
<input id="id1" type="button" value="id" onclick="func()">
<script>
id1 = document.getElementById("id1");
</script>
</body>
</html>
試してみる
ところがIE8 が問題を引き起こすさらに簡単な例が存在する。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
<script>
function func(){
alert(id1.value);
}
</script>
</head>
<body>
<input id="id1" type="button" value="id" onclick="func()">
<script>
id1 = document.getElementById("id1");
</script>
</body>
</html>
試してみる
このケースでは IE8 がフリーズする! (ムムム... どうやら再現性はない...)
そして IE の「開発者ツール」は次のように表示する。
document.getElementById がサポートされていないんだって?!
なお、IE8 の document.getElementById に関する他の不可思議な側面に
for(obj in document){
....
}
で取り出せない事もある。