iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

初心者解任務啦!JS 的 30 道任務系列 第 12

[ Day 12 ] - <script> 標籤放哪裡~

上一篇有提到,一個瀏覽器在解析網頁時,會將 HTML 內容由上至下一行一行解析成 DOM 的節點,
並且透過 DOM API 來控制節點

那麼,HTML 在寫 JavaScript 時,可以放的位置有兩個地方

  • 放在 ... 之間
  • 放在 之前

如果放在 ... 裡面,可以嗎?

直接來看範例:

結果是什麼都沒出現,說好的文字呢?

最前面有提到,解析網頁時,會將 HTML 內容由上至下一行一行解析成 DOM 的節點,
當 放在 ... 中,要操控 HTML 元素時,
瀏覽器實際還沒有解析網頁完成,所以無法得到預期的效果。

所以,需要放在 之前,就可以得到預期的效果,範例及結果如下:

參考資料與學習資源

  • 0 陷阱!0 誤解!8 天重新認識 JavaScript!
  • JavaScript 指南
  • 六角學院 - JavaScript 必修篇 - 前端修練全攻略

本日小節

這是我的學習紀錄,歡迎各路大神指點指教,有任何問題都可以傳訊息給我~
我們下次見!


上一篇
[ Day 11 ] - DOM
下一篇
[ Day 13 ] - 如何透過 DOM 抓取網頁元素
系列文
初心者解任務啦!JS 的 30 道任務30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言