DOM (Document Object Model)

本篇會談到

• 節點樹狀圖
• 為甚麼 Script 通常都在 Html body的結尾？
• HTML5 屬性介紹
  • HTML5之後，我們可以在script標籤定義他的行為，解決如果 script 要放在 head 裡面問題

圖片來源：六角學院

Document Object Model 文件物件模型，簡單來說就是把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件，而這些物件最終會形成一個樹狀結構，下面有一張示意圖可以參考。

• document 網頁文件

• Eleent 網頁元素

• Attribute 屬性。

了解 DOM 如何透過 JS 操作，就可以輕鬆執行網頁裡面所有的節點

✐ 為甚麼 Script 通常都在 Html body的結尾？

JS 可以放在 head 也可以放在 body 的結尾，放在結尾的好處是在 DOM 需要整個程式碼從頭到尾執行，如果放在 head 的地方就執行到 JS 的部分，但 body 還沒被執行到，也就是 DOM 的節點還沒被製作，這時候裡面的元素就不會被抓取到特定的資料。

所以放 body 後面的目的就是html的標籤都變成節點的時候，js可以抓取到裡面的內容。

✐ HTML5 屬性介紹

HTML5以前，script標籤沒有這兩個屬性，瀏覽器會依照順序執行
HTML5之後，我們可以在script標籤定義他的行為，包括網路請求是否同步，執行時機等

async 會非同步去請求外部腳本 回應後停止解析執行腳本內容

• asynchronous(非同步)的縮寫
• 發起請求，腳本回來之後，停止解析執行腳本，執行後恢復解析
• 沒有辦法確保 DOM 都已經全部渲染
• 在複雜的網站中，HTML、JavaScript 的檔案都來越大，需要等到整個 DOM 樹都載入完成才開始下載 <script> 內的資源，網站讀取完成到可操作，便會有明顯的延遲感

defer 也會非同步請求外部腳本 但是等待瀏覽器解析完才執行

• Deferred 延遲的縮寫
• 加上 defer 屬性後，瀏覽器會繼續解析、渲染畫面，而不會因為需要載入 <script> 內的資源而卡在那邊等；實際上的執行時間，會在 DOM ContentLoaded 執行之前，由上到下的依照擺放順序觸發
• 布林值
• 同步地載入腳本 <script defer="false">

參考：

• defer跟async是什麼 ?
• <script> 的 async、defer 屬性介紹

type="module" 將此檔案認為是一個 JavaScript 模組

• 此段程式碼會當成 JavaScript 模組（module）
• 腳本內容的處理不受 charset 與 defer 屬性影響
• <script> 預設行為會像是 defer 一樣，背景下載，且等待 DOM 解析、渲染完成後才執行
• defer 屬性無法在 type="module" 產生作用。但同樣可以透過 async 屬性讓它在下載完成後即刻執行

tags: JS

最後，親愛的大家！我需要你的大聲鼓勵 ٩(⚙ᴗ⚙)۶

如果覺得這篇文章對你有幫助，請給我個一個小小的鼓勵 ❤ 讓我知道，這會成為我寫下去很大的動力。
對了，我還有其他文章，如果有興趣也來逛逛吧！
(文章中如有覺得不妥之處、錯誤內容，也可以透過聯絡我，我會儘速改善，感謝！)

☞ YoJanni 珍妮 2021 正在設計轉職前端的路上，希望大家在學習的路上能夠一起成長
☞ 聯絡我