Question

为什么这段代码有效？

function run(){
  var name =document.getElementById('name');
  name.classList.toggle('name');

}

但这段代码没有？ var name是在全局范围内定义的，为什么在run函数中无法访问它？

var name =document.getElementById('name');
function run(){    
  name.classList.toggle('name');
}

Answer 1

在完全解析DOM之后才会调用

run()，因此当它尝试执行：document.getElementById('name');时，将找到该元素。

但是，当该行从run()中提取并放置在函数之外时，在完全解析DOM之前调用该行并且找不到该元素。

您可以在结束script代码（body）之前放置所有代码（或代码的</body>引用）来解决此问题。当浏览器遇到这个时，所有HTML都将被解析到内存中，并且可以找到该元素。

＆＃13;

.name { background: red; color: white;  }

＆＃13;

<!doctype html>
<html>
<head>
</head>
<body>
  <div id="name" class="name" onclick="run()">Name</div>
  
  <!-- When the script is placed after all the other body content, it will
       be able to scan the DOM for any of that content. -->
  <script>
    var other =document.getElementById('name');
    function run(){
      other.classList.toggle('name');
    }
  </script>
</body>
</html>

＆＃13;

而且，正如我在评论中提到的，最好不要命名任何内容name，因为name是全局window对象的属性，可能会出现并发症当你使用那个标识符时。

Answer 2

name是全球财产，即。 window.name。将变量定义为其他内容：

＆＃13;

    var other =document.getElementById('name');
    function run(){
      other.classList.toggle('name');
    }

＆＃13;

.name {
  background: red;
  color: white;
  }

＆＃13;

<div id="name" class="name" onclick="run()">Name</div>

＆＃13;

它现在可以正常工作。

虽然你使用名字，但它会引发错误：

＆＃13;

var name =document.getElementById('name');
    function run(){
      name.classList.toggle('name');
    }

＆＃13;

.name {
  background: red;
  color: white;
  }

＆＃13;

<div id="name" class="name" onclick="run()">Name</div>

＆＃13;

这里发生了什么？

您正在使用和html对象修改窗口属性名称。而你正在使用classList，它实际上是html对象的属性，但不是window的属性。因此，访问window属性上的classList属性（虽然它转换为html对象，它仍然是窗口对象）显然会给你带来未定义的错误。

因此，我们强烈反对改变全球财产。

在本地范围内，您不会修改窗口属性，而是定义局部变量，因此工作正常。

全局范围在函数内部无法访问？

2 个答案: