常常聽到人家講說 DOM 元素，到底是什麼?
DOM 的英文全名是 Document Object Model，中文是「文件物件模型」。
是 HTML、XML 和 SVG 文件的程式介面。它提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。DOM 提供了文件以擁有屬性與函式的節點與物件組成的結構化表示。節點也可以附加事件處理程序，一旦觸發事件就會執行處理程序。 本質上，它將網頁與腳本或程式語言連結在一起。
參考來源：https://developer.mozilla.org/zh-TW/docs/Web/API/Document_Object_Model
另外透過 KURO 老師所寫的重新認識 JavaScript 的文章 一書中解釋 DOM 是滿簡單明瞭的，文中提到：
DOM 是一個將 HTML 文件以樹狀的結構來表示的模型，而組合起來的樹狀圖，我們稱之為「DOM Tree」。
一開始學習 HTML 時，會學習到基本架構如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document</title>
</head>
<body>
<h1>這是h1</h1>
<p>這是內容</p>
<a href="#">這是一個 a 連結</a>
</body>
</html>
瀏覽器是從上到下一行一行的讀取，DOM tree 就是把所有的節點拆開後，彼此的關係會像一棵樹，故取名之，如下圖：
以 document 為起點，可以延伸出許多的 HTML 標籤，一個節點就是一個標籤，往下又可以再延伸出「本文(text)節點」與「屬性 (Attribute)的節點」。JavaScript 就是透過 DOM 提供的 API 來對 HTML 做存取與操作。
一些節點註記：
- Element: html, head, body, ul, li...
- Attribute: a, id, type...
- text: h1, p, span...
<以上有誤還請不吝指正。>
DOM: JavaScript 用來控制「網頁」的節點與內容的標準，「DOM」有著 W3C 所制定的標準來規範。上方提到的 DOM API 是什麼?
先解釋一下 API，應用程式介面，英文全名是：Application Programming Interface。
我個人比較喜歡知道縮寫英文的意思，不然會被英文名詞嚇唬了。超級多英文縮寫名詞啊!
可以透過下方影片了解 API 的概念。
想要透過 DOM API 取得節點，透過 JavaScript 可以這樣寫：
// 根據傳入的值，找到 DOM 中 id 為 'xxx' 的元素。
document.getElementById("xxx");
// 針對給定的 tag 名稱，回傳所有符合條件的 NodeList 物件 [註1]
document.getElementsByTagName("xxx");
// 針對給定的 class 名稱，回傳所有符合條件的 NodeList 物件。
document.getElementsByClassName("xxx");
// 針對給定的 Selector 條件，回傳第一個 或 所有符合條件的 NodeList。
document.querySelector("xxx");
document.querySelectorAll("xxx");
而透過 DOM API 選取出來的節點，我們可以透過操作 textContent 屬性來變更它的文字。
設定一個 HTML 屬性節點為 id，名稱為 greet：
<h1 id="greet"></h1>
可以先透過 document.querySelector() 選取方法來取得節點，然後修改 textContent 屬性：
<script>document.querySelector('#greet').textContent = 'Hello World!'</script>
可以看一下 codepen
這樣就可以透過 JavaScript 在網頁上輸出 "Hello World!" 囉！
一開始有學到 getByElementById 來賦予 id 的內容，後面會學習到透過 querySelector 能選擇的屬性更多元! jQuery 的 $ 錢字號概念就是從 DOM API 取得方式來的。
參考文章：https://ithelp.ithome.com.tw/articles/10191666
iThome鐵人賽
看影片追技術