为什么将<script></script>引用语句放在head中调用函数时显示为null

<!DOCTYPE html>
<html>
<head>
 <title>gundong</title>
 <link rel="stylesheet" type="text/css" href="css/html.css">
  <script type="text/javascript" src="js/js.js"></script>
</head>
<body>
 <div class="main" id="main">
  <div class="banner" >
   <a href="">
       <div class="banner-i solid1 active"></div>
   </a>
   <a href="">
    <div class="banner-i solid2"></div>
   </a>
   <a href="">
    
   <div class="banner-i solid3"></div>
   </a>
  </div>
  <!-- 按钮 -->
  <a href="javascript:void(0)" class="button left"></a>
  <a href="javascript:void(0)" class="button right"></a>
  <!-- 下面是点 -->
  <div class="dots">
   <span class="dotss"></span>
   <span class=""></span>
            <span class=""></span>
         </div>
     </div>
    
</body>
</html>

function byId(id){
return typeof(id) === "string"?document.getElementById(id):id;
}
console.log(byId("main"));

慕沐0220913 2019-12-13

源自：项目：JavaScript轮播图 3-1 封装getElementById（）

收起

1回答

好帮手慕柯南回答被采纳获得+3积分 2019-12-13 18:43:45

同学你好！

建议你将<script type="text/javascript" src="js/script.js"></script>放在body的尾部，原因：

这与html文件的执行顺序有关，html是至上而下执行的

1.在head中导入js：在加载js时有些值会进行初始化，但此时html中的标签元素还没有加载完，因此便获取不到。

2.将js放在body的尾部：在加载js时html的标签元素已经加载完，因此可以正常显示。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

慕沐0220913 提问者 #1

那请问如何判断何时放body何时放head还是说优先body

2019-12-13 18:46:40
好帮手慕柯南回复提问者慕沐0220913 #2

同学，如果加载js就需要从html中获取某个元素的信息，此时就可以放在body尾部，如果页面触发了某个事件此时js才需要加载页面的某个运算，就可以放在head中。没有优先的问题，不影响程序执行的情况下，放哪里都是可以。祝学习愉快~

2019-12-13 19:00:40