迹忆客 专注技术分享

所有网站都是用 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.jiyik.com/w/python/">Python</a>
  <a href="https://www.jiyik.com/w/angular/">Angular</a>
  <a href="https://www.jiyik.com/w/go/">Golan</a>
  <a href="https://www.jiyik.com/w/node/">Node.js</a>
  <a href="https://www.jiyik.com/w/php/">PHP</a>
  <a href="https://www.jiyik.com/w/java/">Java</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.jiyik.com/w/go/">Golang</a>
{
  "0": <a href="https://www.jiyik.com/w/go/">,
  "1": <a href="https://www.jiyik.com/w/java/">Java</a>,
  ...
}