为什么J.S.引用的“ID”低于脚本时，代码无法正常工作？

Question

当我编写如下代码时

<p id="demo"></p>
<script>
document.getElementById('demo').innerHTML = 0xFF;
</script>

然后浏览器显示结果255（应该是）。但 当我用的时候

<p id="demo"></p>

在脚本下方，浏览器不显示任何内容。 e.g。

    <script>
    document.getElementById('demo').innerHTML = 0xFF;
    </script>

<p id="demo"></p>

为什么这样？

Answer 1

这是因为浏览器引擎首先运行脚本代码，在你的情况下，dom没有元素'demo'，所以在console.log中你得到一个错误。

出于这个原因，脚本标签最好放在页面底部。

Answer 2

正在按顺序加载HTML，因此在调用脚本时该元素不存在。你可以通过做这样的事情来等待加载页面

<script>
    window.addEventListener('load',()=>{
        document.getElementById('demo').innerHTML = 0xFF;
    });
</script>

<p id="demo"></p>