为什么将变量分配给“textContent”元素必须位于页面底部？

Question

我正在练习 Javascript 中的一些概念，并在尝试重新创建自己的代码时遇到了一些问题。 如果将我的 h1.textContent 分配给我的代码上方的变量名，我会收到“ReferenceError：responseH1 is not defined”，这对我来说很有意义。

我的期望是在代码上方分配变量将是使用变量之前的正常操作过程，但是，除非我将它放在代码的底部，否则我会得到“ReferenceError”。 我用谷歌搜索了为什么会这样，但无法打开任何东西。 我什至不知道要搜索什么来找到解决方案。

let section = document.querySelector('body');
section.innerHTML = '';
let h1 = document.createElement('h1');
section.appendChild(h1);
// h1.textContent = responseH1; /// This creates an Error if on top. Why is this?

let machineOn = true;

let score = '15';

if (machineOn = true) {
    responseH1 = 'Welcome! Your Machine is turned on!';
} else {
    responseH1 = 'Hello, Your Machien is turned off!';
}

h1.textContent = responseH1; // This makes it work when on bottom. Why is this?

Answer 1

因为浏览器解析 DOM - 在解析之前，它只是一个字符串 -自上而下，逐个元素。

如果在途中找到 Javascript，它会立即运行代码。

如果有问题的元素低于 Javascript，则该元素尚未解析，因此在文档 object model (DOM) 中尚不存在。

为了帮助解决这类问题，浏览器有一个事件告诉您 DOM 何时被完全解析，您可以将您的代码注册为侦听器，这意味着您的代码在事件发生时立即执行。 该事件称为DOMContentLoaded 。 如果你使用它，那么 HTML 中的 JS 的 position 就不再重要了。

例子：

document.addEventListener('DOMContentLoaded', function(event) {
  // your code here
});

如果您的 Javascript 代码在外部文件中，您还有另一个选择。

您可以将脚本包含在文档的<head>部分中，并添加defer属性。

<script src="./path/to/my-script.js" defer></script>

这做了两件事：

延迟执行脚本中的代码，直到DOMContentLoaded发生。
延迟DOMContentLoaded的结束，直到您的脚本完全执行。

为什么将变量分配给“textContent”元素必须位于页面底部？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-28 10:46:02

为什么将变量分配给“textContent”元素必须位于页面底部？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-28 10:46:02

解决方案1
1 已采纳 2020-06-28 10:46:02