是否必须等待DOM加载完成后再执行操作DOM的JavaScript代码

你遇到的Cannot Set Properties of Null (setting 'onclick')报错原因是完全正确的：执行document.querySelector('button')时DOM树还没解析到对应的button元素，该方法返回了null，对null设置属性自然会抛出类型错误。

不是必须使用DOM加载相关的包裹函数，只要保证操作DOM的代码执行时，目标元素已经被解析生成即可，常见的解决方案有以下几种： #

• 方案1：将script标签放在body闭合标签之前、所有DOM元素的后方
  浏览器会从上到下逐行解析HTML，把脚本放在所有DOM元素后面的话，解析到脚本时前面的DOM已经全部生成，直接运行你原来的代码也不会报错，不需要额外加加载监听逻辑。
  示例：

  <body>
    <button>Change color</button>
    <!-- 脚本放在所有DOM元素之后 -->
    <script src="Dom.js"></script>
  </body>
  

• 方案2：给script标签添加defer属性
  如果需要把脚本放在head标签里，可以添加defer属性，被标记的脚本会异步加载，等整个DOM树解析完成后再按顺序执行，也不会阻塞页面渲染，不需要额外包裹事件监听。
  示例：

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

• 方案3：监听DOM加载完成事件
  就是你现在用的方案，除了window.onload之外更推荐用DOMContentLoaded事件：window.onload需要等页面所有资源（图片、样式表、字体等）全部加载完成才触发，而DOMContentLoaded只要DOM树解析完成就会触发，执行时机更早，更适合仅需要操作DOM的场景。
  示例：

  document.addEventListener('DOMContentLoaded', function() {
    const btn = document.querySelector('button');
    function random(number) {
      return Math.floor(Math.random() * (number+1));
    }
    btn.onclick = function() {
      console.log("点击了按钮");
      const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
      document.body.style.backgroundColor = rndCol; 
    }
  })
  

总结 #

没有强制要求必须用加载事件包裹JS代码，只要保证你操作目标DOM元素的逻辑执行时，该元素已经被浏览器解析生成即可，以上几种方案可以根据实际开发场景选择。

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