※ 查找 DOM 元素有兩種途徑：
- 直接選出一個節點 (select)：要在樹狀結構裡查找資料，至少要先選出第一個元素。
- 從一個特定節點，查找到週邊的節點 ：選出一個元素後，就可以順著結構找出父元素、子元素 、甚至同一層的兄弟元素，這種行為稱為「遍歷 (traverse)」。
※ 選出特定 DOM 節點的語法 ：
- querySelector：搭配指定 CSS 選擇器選出一個元素節點，如果有很多個元素，則會直接回傳第一個找到的結果。
語法：element = document.querySelector(selector)
程式碼拆解：- document:在文件裡尋找。
- querySelector:選取網頁上的元素。
- 參數：selector：一個包含一個或多個 CSS 選擇器的字符串。
// 選取第一個 class 為 'example' 的 div 元素
const div = document.querySelector('div.example');
// 選取 id 為 'header' 的元素
const header = document.querySelector('#header');
- querySelectorAll：搭配指定 CSS 選擇器選出很多元素，回傳一個類似陣列的 NodeList。
- 語法：nodeList = document.querySelectorAll(selector)
- 參數：selector：一個包含一個或多個 CSS 選擇器的字符串。
// 選取所有 class 為 'example' 的 div 元素
const divs = document.querySelectorAll('div.example');
// 選取所有位於列表中的項目元素
const items = document.querySelectorAll('ul > li');
※ 修改 DOM 節點的語法 ：
新增節點：
document.createElement(tagName)：新增一個元素。
用textContent 寫入文字資料：
在JS中宣告一個變數，把變數指向到DOM網頁元素位置去。直接選取變數來更改網頁文字內容、並重新賦予值。
//JS部分
const el = document.querySelector('h1');
el.textContent = "hello world"; //寫法較簡潔
修改元素的內容：
- NODE.innerHTML = "修改元素的內容" ： 會解析 HTML 標籤。
- NODE.innerText = "修改元素的內容" ： 不會解析 HTML 標籤（只處理文字）。
將節點插入 DOM Tree：
元素建立之後，在瀏覽器上還看不到，需要透過 appendChild、insertBefore 或 replaceChild 等方法將新元素加入至指定的位置之後才會顯示。常用到的是 appendChild。
語法：NODE.appendChild(Node)
刪除節點：
parentElement.removeChild(NODE)NODE.remove()
※ DOM 元素可以調整那些內容：
※ 樣式：classList，className和style。
說明：
classList: 這是一個元素的類別屬性的集合，提供了添加、刪除和切換CSS類別的方法。
className: 這是一個表示元素class屬性的字符串。可以直接修改這個屬性來改變元素的類別。
style: 這個屬性允許直接在元素上設定行內樣式。
操作 CSS樣式：
NODE.classList： 查看目前所有 class 名稱，會回傳類似陣列的清單。NODE.classList.add(className1, className2)： 加入一個或多個樣式。NODE.classList.remove(className1, className2)： 刪除樣式。NODE.className = className- 如果樣式只有一個，也可以直接寫入。
操作style 屬性：改變的是元素的視覺呈現（即CSS樣式），並不會改變HTML源代碼中的屬性值。
NODE.style.backgroundColorNODE.style.borderStyle
※ 屬性：修改的是元素的HTML屬性。
屬性操作：
getAttribute()-得到屬性內容，setAttribute()-新增或修改屬性內容。
※ 內容：innerHTML-取得HTML，innerText-改變裡面的文字內容。
※ Javascript Even機制：
在DORM元素上新增一個監聽器，來偵測使用者的操作行為，接著監聽器收到訊號後會如何執行對應程式
執行程序：
- addEventListener：增加一個事件監聽器
- callback function
- capturing & bubbling
※ 設置事件(Event Handler)：
設置事件時，需要考慮到幾個基本要件：
- 觸發事件的 HTML 元素
- 事件類型，如 click、submit、keyup....
- 想要觸發的程式，會是一個函式，該函式會稱為事件處理器 (event handler)
※事件監聽器(Event Listener)：
// listener
element.addEventListener('click', greeting)
// handler
function greeting() {
alert('handling event')
}
addEventListener 可以傳入三個參數：
- 事件名稱 (event name)，如 'click'
- handler，要啟動的 function，也可以直接使用匿名函式
- useCapture，切換 capturing 機制
※ 常見事件種類：
滑鼠事件(mouse event)：
click- 滑鼠點擊元素mousemove- 滑鼠滑過元素mouseout- 滑鼠離開元素
鍵盤事件(keyboard event)：
keydown- 點擊且長按一個鍵時keyup- 放開按鍵時
表單事件：
submit- 提交表單時focus- 點擊某個輸入框時input- 輸入框內容改變時
other事件：
- 檔案讀取(document 事件)
- 視窗變化相關的事件resize，scroll，load
