script写在head与写在body中的区别

咱先说将Javascript写在head里面的情况吧,如果你要在这里面去操控DOM元素,是会报错的,因为浏览器是先执行head标签里面的内容,在执行时你的DOM元素还没有生成.(使用了windows.loader的除外,这个后面再说)

例子:

<html>
<head>
<script>
  var mybtn = document.getElementById('mybtn')
  console.log(mybtn)
</script>
</head>

<body>
<div id="toolbar">
    <input type='button' value="My" id="mybtn"></input>
</div>
</div>
</body>
</html>

在这一段中输出的结果为null,在head标签中多数是用来引入数据和方法的,不会对DOM元素进行修改

如果将上面的script移动到body中呢(放在所有元素的后面)

<html>
<head>
</head>

<body>
  <div id="toolbar">
    <input type='button' value="My" id="mybtn"></input>
  </div>
</div>
    <script>
      var mybtn = document.getElementById('mybtn')
      console.log(mybtn)
    </script>
</body>
</html>

现在你可以看到输出了正确的DOM元素

因为当浏览器执行到script时,DOM元素都已经生成好了,所以可以看到正确的DOM

window.loader // 当页面DOM生成完毕后执行

注意:window.loader一个页面只能有一个

例:

<html>
<head>
  <script>
    window.onload = function(){
      var mybtn = document.getElementById('mybtn')
      console.log(mybtn)
    }
  </script>
</head>
<body>
  <div id="toolbar">
    <input type='button' value="My" id="mybtn"></input>
  </div>
</div>
</body>
</html>