本文為 DOM 基本介紹系列文，第 6 篇：
- HTML DOM 破解：新手完全指南，帶你深入理解網頁結構
- 初學者指南：JavaScript 中的DOM 模型與HTML 的關係
- JavaScript 中的DOMContentLoaded：新手必讀指南
- JavaScript DOM 常見屬性介紹：給新手的指南
- 深入理解DOM 中的.parentNode 和.children 屬性
- 完全指南：如何使用JavaScript 的getElementById 方法
- JavaScript 中querySelector 的使用指南：初學者必讀 👈進度
- JavaScript 新增與移除DOM 元素：新手指南
- JavaScript DOM insertAdjacentElement() 使用指南：給新手的入門文章
- insertAdjacentElement 與 insertAdjacentHTML 的常見錯誤解析
- 使用 JavaScript 的 dataset 屬性：為 HTML 元素動態添加自訂屬性
- 新手指南：JavaScript classList 方法介紹
在網頁開發中，操作 DOM（文件物件模型）是一項不可或缺的技能。
透過操作 DOM，我們可以動態地改變網頁的內容和結構，提升使用者體驗。
為了選取並操作 DOM 元素，JavaScript 提供了多種方法。
今天我們要介紹其中一個強大且簡潔的方法：querySelector。
閱讀本文前，建議先具備相關概念：前端 101｜什麼是 CSS 選擇器？｜EP 02
什麼是 querySelector？
querySelector 是 JavaScript 中用來選取 DOM 元素的方法之一。
它允許我們使用 CSS 選擇器語法 來精準地選取頁面上的元素。
與傳統的選取方法（如 getElementById、getElementsByClassName 等）相比，querySelector 更具彈性，能夠選取符合條件的第一個元素。
querySelector 的基本用法
語法
var element = document.querySelector(selectors);selectors：一個包含 CSS 選擇器的字串。
返回值
element：找到的第一個符合條件的 DOM 元素。如果沒有找到符合的元素，則返回null。
使用 CSS 選擇器
querySelector 支援所有的 CSS 選擇器，這讓我們能夠以簡單的方式選取 DOM 元素。
透過 ID 選取
若要選取 ID 為 myId 的元素，可以這樣寫：
var element = document.querySelector('#myId');透過類別選取
若要選取類別名為 myClass 的元素，使用以下語法：
var element = document.querySelector('.myClass');透過標籤選取
若要選取第一個 div 元素：
var element = document.querySelector('div');組合選擇器
你可以結合多種選擇器。例如，若要選取類別為 myClass 的 div 元素，可以這樣做：
var element = document.querySelector('div.myClass');或選取位於 ul 裡面的所有 li 元素：
var element = document.querySelector('ul li');querySelectorAll
除了 querySelector，我們還可以使用 querySelectorAll 來選取多個符合條件的元素。
差異
querySelector：返回第一個符合條件的元素。querySelectorAll：返回所有符合條件的元素，結果是一個NodeList（節點列表）。
用法
var elements = document.querySelectorAll(selectors);例如，選取所有類別為 myClass 的元素：
var elements = document.querySelectorAll('.myClass');然後，可以使用 forEach 來遍歷這些元素並對它們進行操作：
elements.forEach(function(element) {
// 對每個元素進行操作
});實際範例
讓我們來看一個實際的範例，了解如何使用 querySelector 和 querySelectorAll。
HTML 程式碼
<!DOCTYPE html>
<html>
<head>
<title>querySelector 範例</title>
</head>
<body>
<div id="container">
<p class="text">這是第一段文字。</p>
<p class="text">這是第二段文字。</p>
<p class="highlight">這是高亮的文字。</p>
</div>
<script src="script.js"></script>
</body>
</html>JavaScript 程式碼（script.js）
// 選取 ID 為 container 的元素
var container = document.querySelector('#container');
// 選取第一個類別名為 text 的 <p> 元素
var firstParagraph = document.querySelector('p.text');
// 修改第一段文字的內容
firstParagraph.textContent = '這是修改後的第一段文字。';
// 選取所有類別名為 text 的 <p> 元素
var allTextParagraphs = document.querySelectorAll('p.text');
// 遍歷並修改所有 text 段落的樣式
allTextParagraphs.forEach(function(p) {
p.style.color = 'blue';
});
// 選取類別名為 highlight 的元素
var highlightParagraph = document.querySelector('.highlight');
// 為該元素添加一個新的類別
highlightParagraph.classList.add('emphasis');解釋
- 選取特定元素：使用
querySelector可以選取特定的元素並對其進行修改。 - 批次操作元素：使用
querySelectorAll可以選取多個元素並透過迴圈進行批次修改，例如改變樣式或內容。
注意事項
瀏覽器相容性
querySelector 和 querySelectorAll 在現代瀏覽器中有良好的支援，包括 IE8 及以上版本。
返回值類型
querySelector返回一個單一的 DOM 元素或null。querySelectorAll返回一個NodeList，即使只匹配到一個元素，仍然會返回NodeList。
結論
querySelector 和 querySelectorAll 是強大且靈活的工具，能夠使用 CSS 選擇器來選取 DOM 元素。
它們讓我們能夠以更簡潔的方式操作網頁元素，特別是對於想要精確選取元素的情況，非常實用。
希望這篇文章能幫助你快速上手這些方法，並在學習 JavaScript 的過程中更加得心應手！
祝你在網頁開發的學習路上不斷進步！