Javascript 无法在DOM中选择元素_Javascript

Javascript 无法在DOM中选择元素

javascript

Javascript 无法在DOM中选择元素,javascript,Javascript,这是我的index.html： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <script src="app.js"></script> <h1>The fan

这是我的

index.html

：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <script src="app.js"></script>
        <h1>The fantastic website</h1>
        <h2>A humble experience</h2>
        <div id="hold">
            <p>Test! And test again!</p>
        </div>
    </body>
</html>

当我访问页面并查看控制台时，我看到：

当我在控制台中重复相同的

app.js

代码时，我可以选择元素。但是使用这个代码，我只得到“null”。这里缺少什么？

您的控制台正在输出

null

，因为在运行javascript时，

hold

元素在DOM中还不可用

将脚本移动到页面底部，它应该可以工作。

在定义DOM后，尝试将导入放到app.js

您可能正在尝试在文档完成加载之前访问该文档。这就是为什么有些人将一些脚本放在body标记的末尾。

使用

，并且要明确，因为脚本应该在构建DOM之后而不是之前运行。

const thediv = document.getElementById('hold');

console.log(thediv);