使用 JavaScript 查詢第 N 個子元素

Shraddha Paghdar 2022年5月10日

JavaScript JavaScript Element

所有網站都是用 HTML 和 CSS 構建的。網頁包含幾個相似的元素，有時我們想在所有匹配的元素中找到某些元素。

在今天的文章中，我們將學習如何使用 JavaScript 查詢元素的第 n 個子元素。

在 JavaScript 中使用 `:nth-child()` 查詢元素的第 N 個子元素

:nth-child() 是一個 CSS 偽類，它根據元素在一組匹配元素/兄弟中的位置來匹配元素。

CSS 偽類是新增到選擇器的關鍵字，用於指定所選專案的特定狀態。例如，當使用者的滑鼠游標懸停在按鈕上時，:hover 可以改變按鈕的顏色。

偽類允許你相對於文件樹的內容和相對於外部因素（例如瀏覽歷史記錄（例如，訪問））設定元素樣式。

其內容的狀態（例如，在某些表單元素上啟用）或滑鼠位置（例如，懸停，讓你知道滑鼠是否在元素上）。

/* Selects the first <li> element in a list */
li:nth-child(1) {
  color: red;
}

/* Selects every third element among any group of elements/siblings */
:nth-child(3n) {
  color: red;
}

:nth-child() 採用單個引數來描述匹配兄弟列表中元素索引的模式。

元素索引基於 1。你可以根據需要傳遞偶數或奇數。

現在我們知道什麼是:nth-child 偽類了。讓我們瞭解什麼是 querySelector() 和 querySelectorAll() 以找出匹配的元素。

querySelectorAll() 是 JavaScript 提供的內建 document 方法，它返回 Element/NodeList 物件。

誰的選擇器匹配指定的選擇器。更重要的是，可以傳遞選擇器。

有關詳細資訊，請參閱 querySelectorAll 方法文件。

querySelector() 是 JavaScript 提供的一種內在 document 技術，它返回其 selector 匹配所需 selector 的 Objects/NodeList 部分。有關詳細資訊，請參閱 querySelector 方法文件。

querySelectorAll() 和 querySelector() 之間的唯一區別是返回匹配元素中的所有物件。

然後返回匹配元素中的單個物件。如果傳遞了無效的選擇器，則會丟擲 SyntaxError。

<div>
  <a href="https://www.delftstack.com/howto/python/">Python</a>
  <a href="https://www.delftstack.com/howto/angular/">Angular</a>
  <a href="https://www.delftstack.com/howto/react/">React</a>
  <a href="https://www.delftstack.com/howto/node.js/">Node.js</a>
  <a href="https://www.delftstack.com/howto/php/">PHP</a>
  <a href="https://www.delftstack.com/howto/java/">Java</a>
  <a href="https://www.delftstack.com/howto/c/">c</a>
</div>

const thirdLink = document.querySelector("a:nth-child(3)");
console.log(thirdLink);

const everyThirdElements = document.querySelectorAll("a:nth-child(3n)");
console.log(everyThirdElements);

在上面的例子中，我們使用 querySelector 找到了第三個錨連結。嘗試找到第一個匹配的連結並返回結果。

在另一個示例中，我們使用 querySelectorAll() 搜尋第三個元素的所有倍數。嘗試匹配所有匹配的連結並以物件格式返回結果。

輸出：

<a href="https://www.delftstack.com/howto/react/">React</a>
{
  "0": <a href="https://www.delftstack.com/howto/react/">,
  "1": <a href="https://www.delftstack.com/howto/java/">Java</a>,
  ...
}

要檢查完整的工作程式碼，單擊此處。

Author: Shraddha Paghdar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

在 JavaScript 中使用 :nth-child() 查詢元素的第 N 個子元素

相關文章 - JavaScript Element

在 JavaScript 中使用 `:nth-child()` 查詢元素的第 N 個子元素