接下來這幾篇我想來複習JavaScript的DOM。
但要講DOM前，我們要先來了解JavaScript在網頁裡到底是負責什麼。
在學前端的人都應該聽過一句話：『HTML、CSS 與 JavaScript 是網頁前端三大要素』。
其中：
但JavaScript嚴格來說並沒有提供網頁的操作方法，我們現在可以在網頁的操作其實都是瀏覽器所提供的。
因此要理解 JavaScript 對網頁的操作，我們首先要先來了解一下瀏覽器：
廣泛來說，在瀏覽器上的 JavaScript 實際上包含了：
「BOM」與「DOM」是由瀏覽器執行環境所提供，前端開發者就是透過 JavaScript 去呼叫 BOM 與 DOM 提供的 API，進一步透過它們去控制瀏覽器的行為與網頁的內容。
根據W3C的資料，BOM是指在瀏覽器環境中，用來操作瀏覽器窗口、處理用戶輸入、導航等相關功能的一組方法和屬性。
儘管BOM本身並沒有正式的標準，但現代網頁瀏覽器已經實現了類似的方法和屬性，以提供JavaScript互動性和對瀏覽器環境的控制。
了解什麼是BOM後，我們要來認識一下BOM的核心： window 物件：
window 物件內建提供很多不同的屬性 (properties) 和方法 (methods)。
而 window 物件提供的屬性主要為 document、location、navigator、screen、history 以及 frames。
在瀏覽器裡的 window object扮演著兩種角色：
Document Object Model（DOM）文件物件模型，一般來說我們很少聽到中文的翻譯，大家都會直接說是DOM。
DOM 規格由這兩個組織：W3C 和 WhatWG 共同制定，並由 WhatWG 統一發布 DOM Living Standard。各家瀏覽器廠商再依照規格實作出 DOM，並提供相關的 JavaScript 操作語法。
瀏覽器載入 HTML 以後，會進一步把 HTML 的語法結構，解析成為上圖右的物件模型，所謂的「物件」擁有屬性與方法。
任何在網頁裡出現的內容，無論看得到或看不到的，都會被解析成為 DOM 的一部分，包含註解。
在了解完了BOM 跟 DOM之後，接下來我們來看一下他們是如何呈現在螢幕上的。
瀏覽器把HTML跟CSS的文件變成網頁的過程我們把它稱作Render(渲染)。
每次當我們進入到網頁時，瀏覽器從解析檔案到畫面顯示出來會進行以下流程：
以上的過程我們就會稱作是：Browser Rendering Path。
而我們可以使用JavaScript來操作網頁就是在DOM以及CSSOM被建立的時候。
補充：CSSOM 是一個存放所有 CSS 選擇器與相關特性的樹狀結構容器，擁有根節點、鄰居節點、後代節點、子代節點以及其他關係。CSSCOM 非常類似於 DOM 文件物件模型 。
首先我們先來了解什麼是API
API (Application Programming Interface)，中文翻譯是應用程式介面。
可以看一下下方影片，可以更了解什麼是API:
在了解什麼是API後，那來說一下什麼是DOM API。
是一組允許開發者使用程式碼來操作和修改 HTML 和 XML 文件的方法和屬性集合。它是用 JavaScript 編寫的，您可以使用它來使用 JavaScript 操作 Web 文檔的 DOM。
簡單來說，DOM API 提供了一個在網頁中操作 HTML 元素的介面，使開發者能夠透過程式碼來創建、修改、刪除和查詢網頁中的元素。它可以讓你動態地更新網頁內容、處理事件、添加效果，以及與使用者互動。
DOM API的操作我們就下一篇來說吧～
補充資料：
https://webdesign.tutsplus.com/what-is-the-dom-api-for-javascript--cms-35650a
iThome鐵人賽
看影片追技術