JavaScript页面加载修改body类报classList of null错误如何解决

问题根因 #

你把Main.js放在了<head>标签内引入，浏览器加载页面时会按顺序执行代码，当执行到第4行调用darkmode()的逻辑时，<body>标签还没被解析渲染，document.body的值为null，自然无法读取classList属性。
而你点击按钮触发darkmode()时，页面DOM已经完全加载完成，document.body存在，所以功能正常。

解决方法 #

你可以任选以下任意一种方案解决：

• 移动脚本引入位置
  把<script src="../Main.js"></script>从<head>标签内移到</body>结束标签之前，和你其他的fruit.js、snake.js等脚本放在一起即可。

• 监听DOM加载完成事件再执行初始化逻辑
  把你开头判断cookie调用darkmode()的代码包裹在DOM加载完成的监听回调里：

document.addEventListener('DOMContentLoaded', function() {
  if (this.c == "darkMode=1") {
    darkmode()
  }
})

• 在darkmode函数内加安全判断
  修改darkmode函数，先判断document.body存在再执行操作，避免报错：

function darkmode() {
    var element = document.body
    // 新增判断，body不存在时直接返回
    if(!element) return
    if(this.darkMode == 1){
        element.classList.remove("dark-mode")
        this.darkMode = 0
        setCookie("darkMode", 0, 10)
    } else {
        element.classList.add("dark-mode")
        this.darkMode = 1
        setCookie("darkMode", 1, 10)
    }
}

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