提问人：felishaww 提问时间：5/6/2020 最后编辑：mplungjanfelishaww 更新时间：11/16/2023 访问量：974
控制台 getElementById 返回 null
console getElementById returns null
问：
好的，所以我正在尝试向我的 HTML 文件添加一个脚本，但无法这样做。我发现当我尝试控制台记录 id 时，它们都返回 null。
console.log(document.getElementById('forms'))
console.log(document.getElementById('signIn'))
console.log(document.getElementById('signUp'))
所以这是我的 HTML 文件的完整代码：
console.log(document.getElementById('forms'))
console.log(document.getElementById('signIn'))
console.log(document.getElementById('signUp'))<div class="container" id="forms">
<div class="overlay-container">
<div class="overlay">
<div class="overlay-left">
<h2>Welcome Back!</h2>
<p>Please login with your personal info</p>
<button class="invert" id="signIn">Sign In</button>
</div>
<div class="overlay-right">
<h2>Hello, Friend!</h2>
<p>Please enter your personal details</p>
<button class="invert" id="signUp">Sign Up</button>
</div>
</div>
</div>
<form class="sign-up" action="#">
<h2>Create login</h2>
<div>Use your email for registration</div>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>Sign Up</button>
</form>
<form class="sign-in" action="#">
<h2>Sign In</h2>
<div>Use your account</div>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<a href="#">Forgot your password?</a>
<button>Sign Up</button>
</form>
</div>答：
0赞
Bassem
5/6/2020
#1
你要确保你的 DOM 被加载，这样你就可以访问这些元素，否则你将作为输出获得。getElementByIdnull
我修改了您的代码片段，以向事件添加一个事件侦听器，该事件侦听器只会在加载整个页面后将 getElementById 的输出输出输出到控制台。Window load
在此处阅读有关 Window load 事件的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
window.addEventListener('load', (event) => {
console.log(document.getElementById('forms'))
console.log(document.getElementById('signIn'))
console.log(document.getElementById('signUp'))
});<div class="container" id="forms">
<div class="overlay-container">
<div class="overlay">
<div class="overlay-left">
<h2>Welcome Back!</h2>
<p>Please login with your personal info</p>
<button class="invert" id="signIn">Sign In</button>
</div>
<div class="overlay-right">
<h2>Hello, Friend!</h2>
<p>Please enter your personal details</p>
<button class="invert" id="signUp">Sign Up</button>
</div>
</div>
</div>
<form class="sign-up" action="#">
<h2>Create login</h2>
<div>Use your email for registration</div>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>Sign Up</button>
</form>
<form class="sign-in" action="#">
<h2>Sign In</h2>
<div>Use your account</div>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<a href="#">Forgot your password?</a>
<button>Sign Up</button>
</form>
</div>
0赞
Yalin Gunayer
5/6/2020
#2
您可能将标记包含在标记中，因此在将元素挂载到 DOM 之前执行脚本，并且调用将返回 。<script><head>getElementById()null
如果是这种情况，您可能希望将标记作为其最后一个子项移动到标记内。虽然这并不能保证在脚本运行之前加载整个页面，但它确实可以保证在脚本运行之前将所有元素插入到 .<script><body>DOM
所以而不是这个：
<html>
...
<script type="text/javascript">...</script>
<body>
...
</body>
</html>
您可以执行以下操作：
<html>
...
<body>
...
<script type="text/javascript">...</script>
</body>
</html>
您还可以在运行脚本之前等待 的事件（例如，这使得标记的位置无关紧要，但它可能会延迟执行的时间比所需的时间长得多，因为它会等待加载所有元素，包括图像或视频。loadwindowwindow.addEventListener('load', ...)<script>
0赞
geppy
11/16/2023
#3
对我来说，我试图获得的组件尚未渲染。添加setTimeout后，检查document.getElementById（）它起作用了
评论
Not reproducible or was caused by a typo While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.