使用 JavaScript 查找第 N 个子元素

Shraddha Paghdar 2023年12月11日

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>,
  ...
}

要检查完整的工作代码，单击此处。

作者： 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 个子元素