控制台 getElementById 返回 null答案

【问题标题】：console getElementById returns null控制台 getElementById 返回 null
【发布时间】：2020-05-06 10:06:45
【问题描述】：

好的，我正在尝试将脚本添加到我的 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>

【问题讨论】：

如果您在表单呈现后执行此操作，则不会。看你的sn-p。有用。要么将脚本放在页面底部，要么包装在加载事件监听器中
投票结束为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.

标签： javascript html dom

【解决方案1】：

您要确保您的 DOM 已加载，以便您可以使用 getElementById 访问元素，否则您将获得 null 作为输出。

我已经修改了您的 sn-p 以向 Window load 事件添加一个事件侦听器，该事件侦听器只会在整个页面加载后将 getElementById 的输出打印到控制台。

在此处阅读有关窗口加载事件的更多信息：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>

【讨论】：

【解决方案2】：

您可能在<head> 标记中包含<script> 标记，因此脚本在将元素装入DOM 之前执行，并且getElementById() 调用返回null。

如果是这种情况，您可能希望将 <script> 标记作为其最后一个子标记移动到 <body> 标记内。虽然这并不能保证在您的脚本运行之前加载整个页面，但它确实保证在它之前的所有元素都被插入到DOM。

所以不要这样：

<html>
    ...
    <script type="text/javascript">...</script>
<body>
    ...
</body>
</html>

你可以这样做：

<html>
    ...
<body>
    ...
    <script type="text/javascript">...</script>
</body>
</html>

您也可以在运行脚本之前等待window 的load 事件（例如window.addEventListener('load', ...)，这使得<script> 标记的位置无关紧要，但它可能会延迟执行比需要的时间长得多因为它等待加载所有元素，包括图像或视频。

【讨论】：