關於 <script> 的放置位置

1月 18 2022 JavaScript

該知道的知識。

舉例來說

如果我們想要存取某個元素，但沒有把 <script> 放在對的地方，結果就會不如預期。

放在 <head> 的情況

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>標題</title>
    <script>
      // 抓 <div>
      const element = document.getElementsByTagName('div')[0]
      // log 出來
      console.log(element)
    </script>
  </head>
  <body>
    <div>yoyoyo</div>
  </body>
</html>

console：

undefined

放在 </body> 的情況

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>標題</title>
  </head>
  <body>
    <div>yoyoyo</div>
    <script>
      // 抓 <div>
      const element = document.getElementsByTagName('div')[0]
      // log 出來
      console.log(element)
    </script>
  </body>
</html>

console：

1	<div>yoyoyo</div>

Why？

當放在 <head> 中，執行到 JavaScript 時，下面 <body> 內容還沒有產生，所以當然抓不到任何東西。

但是放在 </body> 前，執行到 JavaScript 時，內容已經產生好了，這時候就抓的到東西。

這也就是為什麼大家都習慣把 JavaScript 寫在 </body> 前的原因。

關於 <script> 的放置位置

舉例來說

放在 <head> 的情況

放在 </body> 的情況

Why？

Your browser is out-of-date!