JavaScript 中 querySelector 的使用指南:初學者必讀
更新日期: 2024 年 10 月 27 日
在網頁開發中,操作 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 的過程中更加得心應手!
祝你在網頁開發的學習路上不斷進步!