时间戳

首页 > 解决方案 > QuerySelector 返回 null。如何让 querySelector 返回

javascript - QuerySelector 返回 null。如何让 querySelector 返回

问题描述

在此页面和我观看的视频中，一切正常并返回 < h1> Hello < /h1>。但是，Chrome 仍然返回 null。我将非常感谢您的帮助。我已经绝望了。

let myH1 = document.querySelector("h1");
console.log(myH1)
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>###</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="script.js"></script>
  </head>
  <body>
  <h1>Hello</h1>
</body>
</html>

标签： javascripthtml

解决方案

发生这种情况是因为脚本在 HTML 之前加载，所以querySelector没有找到任何东西。

为避免此问题，您必须在 HTML之后加载脚本body 或创建一个侦听器以在页面加载时执行。以下是示例：

在 HTML 之后加载 Javascript

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>###</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <h1>Hello</h1>
  <script src="script.js"></script>
</body>
</html>

与听众

function onLoad() {
    let myH1 = document.querySelector("h1");
    console.log(myH1);
}

document.addEventListener("DOMContentLoaded", onLoad);

推荐阅读