JavaScript：获取第 n 个子元素

获取元素的 n 个子元素是 JavaScript 中非常常见的操作。在这篇文章中，我们将介绍几种方法来获取子元素。

使用 children 属性

children 属性是一个 HTMLCollection 对象，包含元素的所有直接子元素。可以使用 [n-1] 语法访问特定的子元素（注意，children 的索引是从 0 开始的）。

const parentElement = document.getElementById('parent-element');
const nthChild = parentElement.children[n-1];

使用 childNodes 属性

childNodes 属性是一个 NodeList 对象，包含指定元素的所有子节点。NodeList 对象是一个类似数组的对象，可以使用 [n] 语法访问特定子元素（也是从 0 开始）。

const parentElement = document.getElementById('parent-element');
const nthChild = parentElement.childNodes[n-1];

使用 querySelectorAll() 方法

querySelectorAll() 方法返回与指定 CSS 选择器匹配的所有元素，然后您可以使用 [n] 语法访问所需的元素。

const parentElement = document.getElementById('parent-element');
const nthChild = parentElement.querySelectorAll(':scope > *')[n-1];

使用 querySelector() 方法

querySelector() 方法返回与指定 CSS 选择器匹配的第一个元素，然后您可以使用 :nth-child(n) 伪类选择器访问所需的元素。

const parentElement = document.getElementById('parent-element');
const nthChild = parentElement.querySelector(`:nth-child(${n})`);

这些都是获取元素的 n 个子元素的最常见方法，您可以根据实际情况选择适合您的情况的方法。

希望这篇文章对你有所帮助。