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

Posted 2023-05-09

【中文标题】如何使用 QuerySelector 获得第二个匹配项？

【英文标题】：How to get the second match with QuerySelector?

【发布时间】：2014-05-19 02:34:48

【问题描述】：

下面的语句给了我类titanic

的第一个元素

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

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

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/…

querySelectorAll 返回一个集合而不是单个元素。结果按文档顺序返回，定义为深度优先排序。

【参考方案1】：

使用document.querySelectorAll

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

【讨论】：

这行得通。但不会让我能够直接更改它的值，只需阅读它们。因为它是静态节点列表，而不是活动节点列表。此外，静态节点列表比实时节点列表需要更多时间来生成。有其他选择吗？

@NickySmits 您仍然可以对找到的元素进行更改。静态节点列表只是意味着当文档改变时它不会改变（添加/删除元素）

我试过了。但是我无法使用静态节点更改 innerhtml，而使用活动节点则可以。

@NickySmits 那么你在做我不知道的其他事情 - jsfiddle.net/ZQZhX

天哪！它确实有效！谢谢兄弟。我做了完全相同的事情，但没有奏效，但显然这只是一些随机错误。嗯，这对我有很大帮助。您是否也知道有什么方法可以使它成为一个实时节点列表？

【参考方案2】：

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

例如你可以这样做：

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

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

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

【讨论】：

但这会按这个顺序返回它的孩子

@DipanshuMahla 你需要详细说明你试图传达的内容。

我的意思是，您的代码 document.querySelector('.titanic:nth-child(2)') 将获得 Titanic 类的第 n 个子级。但是被问到的是我们需要获得具有相同类的第 n 个节点，就像 Phil 的答案中显示的那样，但是使用 document.querySelector()

根据您的需要使用它。这就是为什么我说“不一定”。您始终可以使用父节点/类，但您还需要知道如何正确使用 css。使用适合您用例的任何一个。

假设您有 4 个“titanic”类的 div，并且您想使用 document.querySelector 选择“titanic”类的第二个 div，并且绝对不是“titanic”类的第二个孩子