document.querySelector获取.content元素返回null问题求助

你遇到的问题其实很常见——你的JavaScript代码在DOM元素加载完成之前就执行了！

看你的HTML结构，脚本文件是放在<head>标签里的，浏览器是从上到下逐行解析页面的：当它执行domManipulating.js里的代码时，<body>里的.content元素还没被创建出来呢，自然就找不到元素，返回null了。

下面给你几个可行的解决方案：

• 方案一：把脚本移到末尾
  这是最简单直接的办法，把<script>标签放在</body>标签之前，这样浏览器会先加载完所有DOM元素，再执行你的JS代码：

  <html> 
  <head> 
  </head> 
  <body> 
  <h1> THE TITLE OF YOUR WEBPAGE </h1> 
  <div id="container"> 
  <div class="content"> This is the glorious text-content! </div> 
  </div> 
  <script src="domManipulating.js"></script> <!-- 移到这里 -->
  </body> 
  </html>
  

• 方案二：监听DOMContentLoaded事件
  如果不想移动脚本位置，可以给document添加DOMContentLoaded事件监听，这个事件会在DOM完全加载完成后触发，这时再执行你的代码就没问题了：

  document.addEventListener('DOMContentLoaded', function() {
    var content = document.querySelector(".content"); 
    var paragraph = document.createElement("p"); 
    paragraph.textContent = " Hey I'm red"; 
    content.appendChild(paragraph); // 补全你未写完的appendChild方法
  });
  

• 方案三：给脚本添加defer属性
  在<script>标签里加上defer属性，浏览器会继续解析HTML，等DOM加载完成后再执行脚本，而且不会阻塞页面渲染：

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

内容的提问来源于stack exchange，提问作者Plínio Helpa