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 回答