Javascript 函数处理未声明的变量

Question

这个问题已经有答案了:

Do DOM tree elements with IDs become global properties? (6 个回答)

已关闭 5 年前。

好吧，下面只是让导航在滚动时缩小，但注意到了一些东西。即使我把 nav.classList 放在它应该是 mainNav.classList 的地方，它仍然有效。然后我登录控制台，即使未声明 nav，nav 和 mainNav 也会返回相同的内容。 HTML 中的每个 ID 都会发生这种情况，因此如果我只输入 id 名称而不输入 getElementById，它仍然会注销该节点。我有点困惑为什么这有效。这是 ES6 的新功能吗？

var mainNav = document.getElementById('nav'); //The whole navigation

window.addEventListener('scroll', function(){
  var scroll = window.pageYOffset | document.body.scrollTop;

  if(scroll < 100){
    nav.classList.remove('nav-shrink');
  } else {
    nav.classList.add('nav-shrink');
  }
});

Answer 1

这不是 ES6 特有的。如果您有一个带有 ID 的 DOM 元素，并使用该 ID 作为变量名(未在其他任何地方声明)，您将获得 DOM 元素:

演示

console.log(hello);

<div id="hello"></div>