为什么DOM元素为空?

4 javascript styles runtime-error

我有这个简单的HTML文件:

<!DOCTYPE html>
<html>
<head>
    <script src='test.js'></script>
</head>

<body>
    <p>I am a paragraph tag</p>
    <h1 >I am an h1 tag</h1>
    <div id="id"> I am a div tag</div>
</body>
Run Code Online (Sandbox Code Playgroud)

这个简单的脚本(test.js):

y=document.getElementById("id");
y.style.color="green";
Run Code Online (Sandbox Code Playgroud)

为什么在地球上“ y”为空?我得到的错误是

TypeError: y is null
Run Code Online (Sandbox Code Playgroud)

我确定这是我所缺少的简单语法,但是我一生都无法解决!救命!

脚本发布:html文件和test.js文件都在同一文件夹中。

CMP*_*MPS 5

创建所有元素后,必须将脚本放置在文档的末尾:

<!DOCTYPE html>
<html>
<head>

</head>

<body>
    <p>I am a paragraph tag</p>
    <h1 >I am an h1 tag</h1>
    <div id="id"> I am a div tag</div>
</body>
<script src='test.js'></script>
Run Code Online (Sandbox Code Playgroud)