9

奇妙な行動を見ました。を作成しましたInput。

<input id='inputid' value='value'/>​

idから直接アクセスしようとしました。例外コンソールをスローする代わりに、入力要素の上に表示されていました。

console.log(inputid);

その後、比較してみましたgetElementById

console.log( inputid == document.getElementById('inputid'));

コンソールが表示されていtrueました。

この動作はjsfiddleで確認できます。

それは奇妙な動作ですか、それとも何か不足していますか?

Chrome 23.0.1271.10 dev-mとでテストしましたfirefox 15.0.1。

4

2 に答える 2

6

4.0 ブラウザーの時代にさかのぼると、Microsoft は、ID を持つすべての要素に対して、その要素への参照を含む ID と同じ名前のグローバル変数を作成すると便利であると判断しました。

これに対するサポートは、他のいくつかのブラウザー (一部のレンダリング モード) で登場しました。このサポートは普遍的なものではないため、この機能は避ける必要があります。

于 2012-09-30T18:50:44.457 に答える
3

好奇心に基づいて、この状況を少し拡張するには、次のようにします。

<html><head>
<script type="text/javascript">
  var overWrite = "world";
  window.onload = function(){ alert(overWrite); };
</script></head><body>
<input id="overWrite" value="hello" />
</body></html>

「世界」に警告します。ただし、//var overWrite = "world";(その行がコメントアウトされているように) を使用すると、[html element]. これはページが読み込まれた後であるため、一時的な割り当てではなく永続的であることに注意してください。

矛盾と読みやすさの問題があるため、使用しないことに強く同意します。

編集

それでもこの問題に興味があり、さらにテストを行いました。変数参照を使用した場合と、変数参照を使用した場合のアクセスがどちらが速いか興味がありましたdocument.getElementById。このテストを行いました：

html

<div id="contentZone"></div>

js

var startTime = Date.now();
for( var i = 0; i < 1000; i++){
    for( var n = 0; n < 2000; n++){
        var ni = document.getElementById("contentZone");
    }
}
var endTime = Date.now();
console.log( endTime - startTime );

var aTime = Date.now();
for( var i = 0; i < 1000; i++){
    for( var n = 0; n < 2000; n++){
        var ni = contentZone;
    }
}
var bTime = Date.now();
console.log( bTime - aTime );

コンソール

431
814

このマシンでのみテストされましたが、使用したdocument.getElementById方が高速であるように思われるため、この変数へのアクセスはさらに望ましくありません。

于 2012-09-30T19:06:00.200 に答える