JavaScript 中 querySelector 的使用指南:初學者必讀

更新日期: 2024 年 10 月 27 日

在網頁開發中,操作 DOM(文件物件模型)是一項不可或缺的技能。

透過操作 DOM,我們可以動態地改變網頁的內容和結構,提升使用者體驗。

為了選取並操作 DOM 元素,JavaScript 提供了多種方法。

今天我們要介紹其中一個強大且簡潔的方法:querySelector

閱讀本文前,建議先具備相關概念:前端 101|什麼是 CSS 選擇器?|EP 02

什麼是 querySelector

querySelector 是 JavaScript 中用來選取 DOM 元素的方法之一。

它允許我們使用 CSS 選擇器語法 來精準地選取頁面上的元素。

與傳統的選取方法(如 getElementByIdgetElementsByClassName 等)相比,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');

組合選擇器

你可以結合多種選擇器。例如,若要選取類別為 myClassdiv 元素,可以這樣做:

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) {
  // 對每個元素進行操作
});

實際範例

讓我們來看一個實際的範例,了解如何使用 querySelectorquerySelectorAll

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 可以選取多個元素並透過迴圈進行批次修改,例如改變樣式或內容。

注意事項

瀏覽器相容性

querySelectorquerySelectorAll 在現代瀏覽器中有良好的支援,包括 IE8 及以上版本。

返回值類型

  • querySelector 返回一個單一的 DOM 元素或 null
  • querySelectorAll 返回一個 NodeList,即使只匹配到一個元素,仍然會返回 NodeList

結論

querySelectorquerySelectorAll 是強大且靈活的工具,能夠使用 CSS 選擇器來選取 DOM 元素。

它們讓我們能夠以更簡潔的方式操作網頁元素,特別是對於想要精確選取元素的情況,非常實用。

希望這篇文章能幫助你快速上手這些方法,並在學習 JavaScript 的過程中更加得心應手!

祝你在網頁開發的學習路上不斷進步!

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *