Question

这是我的HTML：

<html>
<head>
<script src="domManipulating.js"></script>    
</head>

// The DOM
<body>
  <h1>
    THE TITLE OF YOUR WEBPAGE
  </h1>
  <div id="container">
    <div class="content">
      This is the glorious text-content!
    </div>
  </div>
</body>

</html>

这是我的JS

var content = document.querySelector(".content");
var paragraph = document.createElement("p");

paragraph.textContent = " Hey I'm red";

content.appendChild(paragraph);

当我使用控制台测试我的代码时，会出现错误：

Uncaught TypeError: Cannot read property 'appendChild' of null

根据我的理解，变量content无法保留document.querySelector(".content")

当我在控制台中编写document.querySelector(".content")时，它实际上有效，但当我使用var paragraph = document.createElement("p");时，变量变为空。

为什么会这样？

Answer 1

问题似乎是在DOM准备好之前加载<script src="domManipulating.js"></script>。在这种情况下，document.querySelector将无法从DOM中找到该元素

另一种方法是在关闭body代码

之前加载脚本

<body>
   //html tags
<script src="domManipulating.js"></script>
</body>

var content = document.querySelector(".content");
var paragraph = document.createElement("p");

paragraph.textContent = " Hey I'm red";

content.appendChild(paragraph);

<h1>
  THE TITLE OF YOUR WEBPAGE
</h1>
<div id="container">
  <div class="content">
    This is the glorious text-content!
  </div>
</div>

Answer 2

查看HTML中script标记的位置：它上面 正文。在脚本运行时，尚未创建正文（及其所有内容，包括.content）。

将整个脚本包装在加载文档后运行的函数中：

document.addEventListener('DOMContentLoaded', () => { var content = document.querySelector('.content'); // ...

或更好的选择：为您的脚本提供defer属性，只有在文档准备好被解析后它才会自动运行：

<head> <script src="domManipulating.js" defer></script> </head>

我的变量不能保存＆＃34; document.querySelector（＆＃34; .content＆＃34;）＆＃34; ，它返回null

2 个答案: