Javascript 在不使用getElementById和jQuery的情况下使用id访问div

我相信JS中访问id为的元素的标准方法是使用getElementById。如果人们喜欢使用jQuery，那么他们可能会使用选择器。但最近我遇到了一个非常简单的代码示例，如下所示：

HTML:

这是唯一的代码，没有其他变量声明，仅供大家了解。
我们如何能够像访问Javascript对象一样访问div元素

附：代码示例有效

我们如何能够像访问Javascript一样访问div元素 反对

id

s默认创建为全局对象的属性（在全局上下文中）

如果执行

Hello

操作，它将创建一个全局变量

h22

根据,

否则，返回以文档节点为根的HTMLCollection，其 筛选器仅匹配具有名称的命名对象。（根据定义， 这些都是元素。）

具有值为name的id-content属性的HTML元素

---

因此，

窗口

可以按照规范中给出的顺序确定从何处拾取值

参考JavaScript最终指南：

如果使用id属性命名HTML文档中的元素，并且 窗口对象没有该名称的属性，窗口对象为 给定一个不可计算的属性，其名称是

id

属性的值，其名称是表示该文档元素的HtmleElement对象

Window对象在客户端JavaScript中充当作用域链顶部的全局对象，因此这意味着您在HTML文档中使用的id属性成为脚本可访问的全局变量。如果文档包含元素

，则可以使用全局变量

ok

引用该元素

但也有一些例外。如果

window

对象已有一个属性，该属性的名称在html文档中也用作

id

属性，则该属性将不能作为window对象的属性使用

---

其次，如果您有一个id作为窗口属性可用，并且我们也声明了一个具有相同名称的变量，那么显式创建的变量将覆盖包含id的窗口属性。

以实际演示上述答案

Html:

<div id="foo">
  <p>bar</p>
</div>

alert(window.foo);
console.log(window.foo.innerHTML);

[object HTMLDivElement]

<p>bar</p>

警报：

<div id="foo">
  <p>bar</p>
</div>

alert(window.foo);
console.log(window.foo.innerHTML);

[object HTMLDivElement]

<p>bar</p>

控制台：

<div id="foo">
  <p>bar</p>
</div>

alert(window.foo);
console.log(window.foo.innerHTML);

[object HTMLDivElement]

<p>bar</p>

条

您能详细说明一下吗？它们是作为全局对象的

属性创建的，与
全局变量略有不同。
尤其是，创建一个同名的全局变量会隐藏底层属性。@VishalSubramanyamRajesh在上面解释过感谢@gurvinder372这是一个不好的主意，因为名为
h
的全局变量将对该属性进行阴影处理并有效隐藏它。另请参阅。恐怕它已经变得标准化了。