访问DOM元素时window.element和element之间的区别是什么

Question

我喜欢理解浏览器如何在下面给出的代码中区分hello和window.hello

http://jsfiddle.net/PH3t2/291/

var hello = "new hello";
console.log("variable hello : " + hello); // <-- prints "new hello"
console.log(window.hello); // <-- logs HTML elements

<div class="mainWrapper">
  <div class="mainBox" id="hello">
    main
  </div>
  <div class="clear" id="hello"></div>
</div>

指定窗口如何打印HTML元素而不是字符串"new hello"？

Answer 1

问题是因为默认情况下，浏览器将所有元素存储为由window属性键入的id的属性 - 这是您不能拥有相同{{1}的多个元素的部分原因这就是你显示的HTML无效的原因。

这也是id返回Element对象的原因 - 它是对HTML中第一个window.hello的引用。

类似地，浏览器知道，当您定义<div>变量时，您希望将值与参考文件分开存储，而不是hello元素。这就是window.hello返回hello字符串的原因。