使用 JavaScript 查詢第 N 個子元素
所有網站都是用 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>,
...
}
要檢查完整的工作程式碼，單擊此處。
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.
LinkedIn