Django项目中JavaScript运行异常无法访问document.body节点问题

你的Django静态文件配置没有问题，CSS可正常加载即可印证这点。异常本质是JavaScript执行时机早于DOM解析完成，和框架无关：

• 浏览器遵循从上到下的顺序解析HTML构建DOM树
• 当解析到<head>内的普通<script>标签时，会立刻暂停DOM解析，优先下载并执行JS代码
• 你的JS触发执行时，浏览器解析进度仅完成head部分，body节点尚未被解析载入document对象，因此只能获取到head内的内容。你之前在Django项目外可正常运行，大概率是此前script标签位置不同、或加了延迟执行属性。

任选一种即可解决问题：

• 方案1：调整script标签位置（最通用推荐）
  将script标签从head区域移动到</body>标签之前，确保浏览器解析完全部DOM节点后再加载执行JS：

  <!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>index.html</title>
      {% load static %} 
      <link rel="stylesheet" href="{% static 'style.css' %}"/>
  </head>
  <body>
      HelloWorld!
      <!-- 所有页面DOM元素写在script标签前面 -->
      <script src="{% static 'script.js' %}"></script> 
  </body>
  </html>
  

• 方案2：给script标签加defer属性
  如果要保留script在head内的位置，给标签添加defer属性即可，该属性会告知浏览器后台下载JS文件，等整个DOM解析完成后再执行JS，不会阻塞DOM解析：

  <script src="{% static 'script.js' %}" defer></script>
  

• 方案3：JS逻辑监听DOM加载完成事件
  不修改HTML结构，直接调整JS代码，等DOM树完全解析后再执行业务逻辑：

  document.addEventListener('DOMContentLoaded', () => {
      // 所有DOM操作相关逻辑放在回调内
      console.log(document.getElementsByTagName('html')[0].innerHTML)
  })
  

调整完成后刷新页面：

• 控制台打印的HTML内容会包含完整的body节点
• 执行console.log(document.body)将返回对应DOM节点而非null
• 无需修改settings.py中的静态配置，当前静态文件映射规则完全正常。

内容的提问来源于stack exchange，提问作者BillTheKid