# DOM (Document Object Model)
<div class="block">

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

</div>
## ✐ 節點樹狀圖（dom tree）
網頁瀏覽器在做解析的時候會解析成 **節點樹狀圖（dom tree）**，會用成**物件**方式去讀取，只要打開網頁都會有出現dom。

<small>圖片來源：六角學院</small>

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

- `document` 網頁文件

- `Eleent` 網頁元素

- `Attribute` 屬性。

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

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

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

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

### [`async`](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/script#%E5%B1%AC%E6%80%A7) 會非同步去請求外部腳本 回應後停止解析執行腳本內容
- **asynchronous**(非同步)的縮寫
- 發起請求，腳本回來之後，停止解析執行腳本，執行後恢復解析
- 沒有辦法確保 DOM 都已經全部渲染
- 在複雜的網站中，HTML、JavaScript 的檔案都來越大，需要等到整個 DOM 樹都載入完成才開始下載 `<script>` 內的資源，網站讀取完成到可操作，便會有明顯的延遲感

### `defer` 也會非同步請求外部腳本 但是等待瀏覽器解析完才執行
- `Deferred` 延遲的縮寫
- 加上 `defer` 屬性後，瀏覽器會繼續解析、渲染畫面，而不會因為需要載入 `<script>` 內的資源而卡在那邊等；實際上的執行時間，會在 [DOM ContentLoaded](https://developer.mozilla.org/zh-TW/docs/Web/API/Window/DOMContentLoaded_event) 執行之前，由上到下的依照擺放順序觸發
- 布林值
- 同步地載入腳本 `<script defer="false">`

> 參考：
> - [defer跟async是什麼 ?](https://realdennis.medium.com/html-script-%E4%B8%ADdefer%E8%B7%9Fasync%E6%98%AF%E4%BB%80%E9%BA%BC-1166ee88d18)
> - [`<script>` 的 async、defer 屬性介紹](https://medium.com/schaoss-blog/02-html-script-tag-%E5%8A%A0%E4%B8%8A-async-defer-%E7%9A%84%E5%8A%9F%E8%83%BD%E5%8F%8A%E5%B7%AE%E7%95%B0-8205fddbbafc)

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

###### tags: `JS`
{%hackmd @unayojanni/H1Qq0uKkK %}