Question

Noob当天的问题：

我创建了一个带有ID元素的HTML元素的网页。该网页使用jquery和一些其他库。

ex）<div id="personList ">

在页面使用的.js中，我使用jquery操作元素，它的#id作为选择器 - 就像魅力一样。

ex）$("#personList")...

在Chrome控制台中，只需输入personList即可显示HTML元素及其属性。我原以为它不会 - 因为没有用该名称创建的javascript变量......

这是因为：

Chrome非常智能，能够识别DOM中的元素假设我指的是它？
自动创建元素和变量的东西把它放到全球（或其他近全球）的范围内？
还有其他什么吗？

我确信这已经在某个地方得到了解答，并且可能有很好的文档记录，但在尝试使用我的关键字找到它时，我感到很茫然。

Answer 1

DOM元素ID是全局变量。

来自HTML5 standard

具有的所有HTML元素的id内容属性的值一个非空的id内容属性，并且在文档树中窗口浏览上下文的活动文档作为其根目录。

因此，如果我们有：<div id="bar"></div>，您可以通过以下方式访问该元素：window.bar

＆＃13;

console.log(window.test);
window.test.innerHTML = 'amazing';

＆＃13;

<div id="test"></div>

＆＃13;

依靠这个＆＃34;功能＆＃34;可能是很多错误的原因，所以我建议从不使用它。请看以下示例：

＆＃13;

window.that.innerHTML = 'It works';

// some library declares `that` as a global variable
window.that = {};

// This won't work, since window.that no longer references the DOM element
window.that.innerHTML = 'It no longer works';

＆＃13;

<div id="that">Evil div</div>

＆＃13;

Answer 2

由于历史上最好丢失的原因，带有ID元素的元素会附加到global对象，并且就像全局变量一样。

可以通过全局声明变量（let，const或var）来隐藏它们。

在控制台中输入personList时，它会访问window.personList。

这不是一种应该依赖的行为，但仍然是为了与一些古老的代码保持向后兼容。

可以在Chrome控制台中看到JS变量，但是没有明确定义

2 个答案: