为何放在<head>段的日期显示JS代码不生效，放在<body>后可正常运行

浏览器对HTML文档的解析执行遵循从上到下的顺序：

• 放在<head>中的JS代码会在页面DOM节点渲染前就被执行，此时你要获取的id="Date"的输入框元素还未被加载到DOM树中，document.getElementById("Date")返回结果为null，对null读取value属性会抛出JS错误，导致时间无法正常写入到文本框。
• 放在</body>标签之前的JS代码执行时，页面所有DOM节点已经完成解析加载，可以正常获取到目标输入框元素，所以功能可以正常运行。

如果想要将JS代码放在<head>中也能正常运行，可以选择以下任意一种方案：

• 方案1：将JS逻辑包裹在DOMContentLoaded事件回调中，确保DOM加载完成后再执行逻辑：

document.addEventListener('DOMContentLoaded', function () {
  function getDate() {
    var todaydate = new Date(); 
    var day = todaydate.getDate();
    var month = todaydate.getMonth() + 1;
    var year = todaydate.getFullYear();
    var hours = todaydate.getHours();
    var minutes = todaydate.getMinutes();
    var seconds = todaydate.getSeconds();
    var datestring = day + "/" + month + "/" + year + ' ' + hours + ':' + minutes + ':' + seconds;
    document.getElementById("Date").value = datestring;
  }
  getDate()
  setInterval(getDate, 1000);
})

• 方案2：给<script>标签添加defer属性，该属性会通知浏览器延迟脚本执行，直到DOM解析完成后再运行：

<head>
  <script defer>
    function getDate() {
      var todaydate = new Date(); 
      var day = todaydate.getDate();
      var month = todaydate.getMonth() + 1;
      var year = todaydate.getFullYear();
      var hours = todaydate.getHours();
      var minutes = todaydate.getMinutes();
      var seconds = todaydate.getSeconds();
      var datestring = day + "/" + month + "/" + year + ' ' + hours + ':' + minutes + ':' + seconds;
      document.getElementById("Date").value = datestring;
    }
    getDate()
    setInterval(getDate, 1000);
  </script>
</head>

• 方案3：保持你当前将JS代码放在</body>闭合标签前的写法，这也是前端开发中推荐的脚本放置常规方案，可以避免DOM未加载导致的各类元素获取失败问题。

内容的提问来源于stack exchange，提问作者Izzat Bin Ismail