为何JavaScript无法找到元素？我的div被返回null的技术问询

这问题我刚学JS的时候也踩过一模一样的坑！核心原因是你的脚本在页面DOM元素还没加载完成的时候就执行了。

看你的HTML结构：<script src="java.js"></script>放在了<body>的最开头，浏览器是从上到下解析HTML的，当它执行这个脚本时，下面的<div id="box">50%</div>还没被渲染到DOM树里呢，document.getElementById("box")自然找不到元素，返回null，这时候你去访问box.style就会抛出"Cannot read properties of null"的错误。

给你几个靠谱的解决方案：

• 把脚本移到body末尾（最简单直接的方法）
  把<script>标签放到</body>标签之前，这样当脚本执行时，页面上所有DOM元素都已经加载完毕了：

  <html>
  <head>
  <link rel="stylesheet" type="text/css" href="classStyle.css">
  </head>
  <body onmousemove="search()">
  <center>
  <div id="header">Fantasy class</div>
  <div id="box">50%</div>
  <div type="button"> יצירת ליגה</div>
  </center>
  <script src="java.js"></script>
  </body>
  </html>
  

• 监听DOMContentLoaded事件
  修改你的java.js代码，让逻辑在DOM加载完成后再执行：

  document.addEventListener('DOMContentLoaded', function() {
    var box = document.getElementById("box");
    box.style.height = box.innerText;
  });
  

• 给script标签加defer属性
  这个属性会让脚本在DOM解析完成后才执行，同时不会阻塞页面的渲染：

  <script src="java.js" defer></script>
  

另外提个小细节：你写的<div type=buttom>应该是<div type="button">吧？虽然这和当前的null问题无关，但规范的写法能避免后续其他小问题~

内容的提问来源于stack exchange，提问作者דין ודברים