Javascript的DOM操作是前端開發中非常重要的東西。DOM（Document Object Model）是網頁的結構化表示，允許你用 JavaScript 動態操作網頁內容和元素。通過 DOM 操作，你可以改變 HTML 元素、樣式、甚至新增或移除元素，以提供更豐富的互動性。

DOM 的基本概念

DOM 是瀏覽器解析 HTML 文件後形成的樹狀結構，其中每個節點代表 HTML 文件中的一個部分。JavaScript 可以通過 DOM 對 HTML 和 CSS 進行動態修改。

選取 DOM 元素

JavaScript中，可以使用各種方法來選取 DOM 元素。有大概這5種常見的方式
1.document.getElementById()：通過元素的 id 選取單一元素。
2.document.getElementsByClassName()：通過類名選取所有對應的元素，返回一個類陣列。
3.document.getElementsByTagName()：通過標籤名選取所有對應的元素，返回一個類陣列。
4.document.querySelector()：選取符合指定 CSS 選擇器的第一個元素。
5.document.querySelectorAll()：選取所有符合指定 CSS 選擇器的元素，返回一個靜態節點列表。

修改 DOM 元素的內容與屬性

修改元素內容：
1.textContent：修改元素的純文本內容。
2.innerHTML：修改元素的 HTML 內容，可以直接嵌入 HTML 標籤。

修改屬性：
1.setAttribute()：用來修改 HTML 元素的屬性。
2.getAttribute()：取得元素屬性的值。
3.removeAttribute()：移除元素的某個屬性。

添加、移除及修改元素

再來我們也可以動態在網頁中新增或移除元素。
1.createElement()：創建新元素。
2.appendChild()：將新元素添加為某個父元素的子元素。
3.removeChild()：從父元素中移除一個子元素。

DOM 事件處理

DOM 操作中非常重要的一部分是【事件處理】。事件是指用戶與頁面交互時觸發的行為（如點擊按鈕、輸入文字等）。
1.click：點擊事件
2.keydown：按鍵按下事件
3.submit：表單提交事件

今天先到這邊，明天在繼續下個環節。