在 介紹DOM是什麼 時，提到如果把整個網頁比喻成一隻貓，DOM 就是貓身上的各個部位與神經反射。
既然現在我們已經有了貓了！接下來——當然就是選擇部位要來擼貓了！
(本篇文章尊重所有貓貓意願，撰寫過程中沒有任何貓貓受到傷害)
JavaScript 有多種取得 DOM 元素的方法，接下來會介紹常用的 querySelector 系列，以及傳統的選取方法。
aria_carrot
querySelector 系列可以直接使用的 CSS 選擇器 語法來搜尋元素。
document.querySelector()：選取「第一筆」匹配元素當網頁中有複數個符合條件的元素時，querySelector 只會回傳第一個找到的元素；如果找不到，則會回傳 null。
// 1. 透過標籤名稱選取（取得第一個 <h1>）
const mainTitle = document.querySelector('h1');
// 2. 透過 Class 名稱選取（記得要加半形句點 .）
const headerBlock = document.querySelector('.header');
// 3. 透過 ID 名稱選取（記得要加井字號 #）
const submitBtn = document.querySelector('#submit-btn');
// 4. 複合條件選取（選取 .card 底下的 .title）
const cardTitle = document.querySelector('.card .title');
document.querySelectorAll()：選取「所有」匹配元素如果想一次選取多個相同的元素（例如清單中的所有 <li> 或頁面上的所有按鈕），可以使用 querySelectorAll。
它會回傳一個 NodeList（類陣列集合），包含所有符合條件的元素。
// 選取頁面上所有的 <p> 標籤
const allParagraphs = document.querySelectorAll('p');
// 選取 class 為 .item 的所有元素
const allItems = document.querySelectorAll('.item');
// 如何操作這些元素？通常搭配 forEach 迴圈
allItems.forEach((item) => {
console.log(item.textContent);
});
在 querySelector 出現前，JavaScript 主要是透過以下這些專門的方法來取得元素。
document.getElementById('id-name')說明：專門透過 ID 搜尋單一元素（因為 ID 在網頁中應該是唯一的）。
注意：括號內只需要傳入 ID 名稱，不需要加 #。
const mainHeader = document.getElementById('main-header');
document.getElementsByClassName('class-name')說明：選取所有指定 Class 的元素，回傳一個 HTMLCollection（動態類陣列）。
注意：括號內不需要加 .。
const listItems = document.getElementsByClassName('list-item');
document.getElementsByTagName('tag-name')-說明：選取所有指定標籤名稱的元素（如 div, a, li）。
const allLinks = document.getElementsByTagName('a');
| 方法名稱 | 傳入參數格式 | 回傳結果型態 | 適用情境 |
|---|---|---|---|
querySelector |
CSS 選擇器 (.class, #id, tag) |
單一 DOM 元素 / null | 最推薦，選取單一元素時使用 |
querySelectorAll |
CSS 選擇器 (.class, #id, tag) |
NodeList (類陣列) | 最推薦，需批次處理多個元素時使用 |
getElementById |
純 ID 字串 (不加 #) |
單一 DOM 元素 / null |
傳統方法，確定目標有明確指定 ID 時使用 |
getElementsByClassName |
純 Class 字串 (不加 .) |
HTMLCollection(動態類陣列) |
傳統方法，一次選取所有相同 Class 的元素 |
getElementsByTagName |
純標籤名稱 (如 a, li, div) |
HTMLCollection (動態類陣列) |
傳統方法，一次選取所有特定 HTML 標籤的元素 |
留意點
記得加上前綴符號：使用 querySelector 選取 Class 或 ID 時，千萬不要忘記加上 . 或 #。
留意 null 情況：如果 JavaScript 在 HTML 載入完成前就執行，可能會找不到元素而回傳 null。必須確保 <script> 標籤放在 <body> 的最底部！
學會了這些取得元素的方法，選定好要擼貓的部位後。之後會再介紹如何實際動作（操作 DOM）。
再次申明，本篇文章尊重所有貓貓意願，撰寫過程中沒有任何貓貓受到傷害🐱
個人筆記：
JavaScript 基礎概念 | 什麼是 DOM ？如果網頁是一隻貓
JS DOM | 選取多個元素時的集合：NodeList vs HTMLCollection 有何不同？
iThome鐵人賽
看影片追技術