如何获得与 QuerySelector 的第二场比赛？

IT技术 javascript css-selectors selectors-api
2021-03-16 06:52:36

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

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

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

2个回答

利用 document.querySelectorAll

document.querySelectorAll('.titanic')[1]
@NickySmits 然后你在做我不知道的其他事情 - jsfiddle.net/ZQZhX
2021-04-20 06:52:36
@NickySmits 您仍然可以对找到的元素进行更改。静态节点列表只是意味着它在文档更改时不会更改（添加/删除元素）
2021-04-29 06:52:36
这会奏效。但不会让我能够直接更改它的值，只需阅读它们。因为它是一个静态节点列表，而不是一个实时节点列表。此外，静态节点列表比实时节点列表需要更多时间来生成。有替代方案吗？
2021-05-06 06:52:36
碉堡了！它确实有效！谢谢兄弟。我做了完全相同的事情，但没有奏效，但从表面上看，这只是一些随机错误。嗯，这对我有很大帮助。您是否也知道有什么方法可以使它成为实时节点列表？
2021-05-09 06:52:36
我试过。但是我无法使用静态节点更改innerHTML，而使用活动节点则可以。
2021-05-17 06:52:36

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

例如你可以这样做：

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

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

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

使用它适合您的需要。这就是为什么我说“不一定”。您始终可以改用父节点/类，但您还需要知道如何正确使用 css。使用适合您的用例的任何一个。
2021-04-17 06:52:36
但这将按该顺序返回它的孩子
2021-05-04 06:52:36
@DipanshuMahla 您需要详细说明您尝试传达的内容。
2021-05-05 06:52:36
我的意思是你的代码 document.querySelector('.titanic:nth-child(2)') 将获得 Titanic 类的第 n 个孩子。但是要求的是我们需要获得具有相同类的第 n 个节点，就像 Phil 的答案中所示，但是使用 document.querySelector()
2021-05-06 06:52:36
假设您有 4 个类别为“titanic”的 div，并且您想使用 document.querySelector 选择具有“titanic”类别的第二个 div，并且绝对不是“titanic”类别的第二个孩子
2021-05-16 06:52:36
其它你可能感兴趣的问题
上一篇在 ES6 的 `import` 语法中，module是如何准确计算的？ 下一篇如何访问上传的 JSON 文件的数据？