我的 JavaScript 代码 returns getElementById 为空

Question

请注意，这不是重复的 - 我的问题没有被类似的问题解决。

我正在尝试记录这个元素：

<p id="one">Test</p>

到控制台 JavaScript:

var one = document.getElementById("one");
console.log(one);

然而，这个returns null 为console.log(one); 行，我想不通原因。 null 值来自哪里，我如何让它引用 <p id="one">Test</p> 元素？

编辑：完整HTML代码：

<!doctype html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>A tester</title>

        <script src="index.js"></script>

    </head>

    <body>

        <p id="one">One</p>

    </body>

</html>

Answer 1

工作正常:)

var one = document.getElementById("one");
console.log(one);

<p id="one">Test</p>

Answer 2

可能您在 DOM 准备好之前访问元素，请尝试使用 DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function(event) {
  var one = document.getElementById("one");
  console.log(one);
})

<p id="one">Test</p>

Answer 3

它工作正常。

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>A tester</title>

        <script src="index.js"></script>
        <script>
            function getOne()
            {
                var one = document.getElementById("one");
                console.log(one);
            }
        </script>
    </head>

    <body onload="getOne()">

        <p id="one">One</p>

    </body>

</html>

我的 JavaScript 代码 returns getElementById 为空

My JavaScript code returns null for getElementById

html

javascript

null

getelementbyid

console.log