Question

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

HTML：

<div id="h">Hello</div>

JS：

h.innerHTML = "Too bad";

这是唯一的代码，没有其他变量声明，只供人们知道我们如何能够像访问Javascript对象一样访问div元素？

P.S。：代码示例有效。

Answer 1

我们如何能够像访问Javascript那样访问div元素对象

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

如果你<div id="h22">Hello</div>，它将创建一个h22

的全局变量

根据spec，

否则返回一个以Document节点为根的HTMLCollection   filter仅匹配名称为name的命名对象。（根据定义，   这些都是元素。）

具有id内容属性，其值为name的HTML元素。

因此，window可以在规范中指定的顺序中确定从哪里选择值。

Answer 2

引用JavaScript The Definitive Guide：

如果使用id属性在HTML文档中命名元素，并且如果使用   Window对象还没有该名称的属性，Window对象是   给定一个不可数的属性，其名称是find . -name "File*" | xargs cut -d, -f3 | sort | uniq -c | sort -nr属性的值，其名称是表示该文档元素的HTMLElement对象。

Window对象充当客户端JavaScript中作用域链顶部的全局对象，因此这意味着您在HTML文档中使用的id属性将成为脚本可访问的全局变量。如果您的文档包含元素id，则可以使用全局变量<button id="okay"/>来引用该元素。

但也有一些例外。如果okay对象已经有一个名称在html文档中也用作window属性的属性，则它将不能作为window对象的属性使用。

第二，如果你有一个可用作窗口属性的id，并且我们声明了一个同名的变量，那么我们显式创建的变量将覆盖包含id的窗口属性。

Answer 3

实际证明上述答案......

<强> HTML

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

<强>使用Javascript：

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

<强>提醒：

[object HTMLDivElement]

<强>控制台：

<p>bar</p>

使用id访问div而不使用getElementById和jQuery

3 个答案: