我是初学者，面临 Javascript 和 html 链接的问题。在HTML中看不到Javascript的效果

Question

我创建了一个 admin.html 文件，其中 h1 标签内有 div 类。我已经使用脚本连接了 admin.js 文件：src 但是当我在 Javascript 中更改颜色时无法看到效果，但是当我在 Chrome 中检查时相同的代码工作.帮助表示赞赏。

admin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin</title>
    <link rel="stylesheet" href="style2.css">
    <script src="admin.js"></script>  
</head>
<body>
  <ul class="list"> 
    <li id="dashbord"style="font-size: 40px; padding-top: 8px; height: 50px;"><a  href="#dashbord">Dashboard</a></li>
    <br>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
  <div class="div" style="margin-left:25%;padding:1px 16px;height:1000px;">
    <h2>Fixed Full-height Side Nav</h2>
    <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
    <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
    <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
  </div>
  
</body>
</html>

admin.js

const q = document.querySelector('.div h2');
 q.style.color = 'red';

Answer 1

原因是在读取 HTML 文件和构建 DOM 之前对脚本进行了解析和评估。 DOM 元素当时不存在。

将 script 标记移动到 body 的末尾。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
  <ul class="list"> 
    <li id="dashbord"style="font-size: 40px; padding-top: 8px; height: 50px;"><a  href="#dashbord">Dashboard</a></li>
    <br>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
  <div class="div" style="margin-left:25%;padding:1px 16px;height:1000px;">
    <h2>Fixed Full-height Side Nav</h2>
    <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
    <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
    <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
  </div>
  
  <script src="admin.js"></script>  
</body>
</html>

Webpack 等一些框架在头部添加 script 标记并添加 defer 但我不确定这是否总是有效。根据 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script，它应该始终有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin</title>
    <link rel="stylesheet" href="style2.css">
    <script src="admin.js" defer></script>  
</head>
<body>
  <ul class="list"> 
    <li id="dashbord"style="font-size: 40px; padding-top: 8px; height: 50px;"><a  href="#dashbord">Dashboard</a></li>
    <br>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
  <div class="div" style="margin-left:25%;padding:1px 16px;height:1000px;">
    <h2>Fixed Full-height Side Nav</h2>
    <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
    <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
    <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
  </div>
  
</body>
</html>

我是初学者，面临 Javascript 和 html 链接的问题。在HTML中看不到Javascript的效果

I am beginner and facing problem with Javascript and html linkage. Can't see the effect of Javascript in HTML

html

javascript

dom

javascript-objects

dom-events