javascript - 如何使用 QuerySelector 获得第二个匹配项？

Question

以下语句为我提供了类titanic的第一个元素

element = document.querySelector('.titanic');

我将如何检索具有相同类的第二个元素？

Answer 1

利用document.querySelectorAll

document.querySelectorAll('.titanic')[1]

Answer 2

您不一定需要querySelectorAll选择第二个元素，问题是使用querySelectorAPI。您可以在选择器中利用 CSS 的强大功能。

例如，您可以这样做：

document.querySelector('.titanic:nth-child(2)')

选择第二个元素。注意：计数从 开始1，而不是0。

请参阅此快速 CodePen 以解决此方法： https ://codepen.io/adamchenwei/pen/RwZvQvW?editors=1111