Document.querySelector() 未显示所有元素

Posted 2023-05-09

【中文标题】Document.querySelector() 未显示所有元素

【英文标题】：Document.querySelector() is not showing all elements

【发布时间】：2022-01-08 16:20:47

【问题描述】：

我是一个新手，正在尝试设计相关的 CSS 选择器和 JSPath 来运行我的自动化脚本。

在途中，我发现这两者的返回语句不同。请检查以下示例。有人可以告诉我需要在 JSPath 中进行哪些更改以保持结果与相对 CSS 选择器相同。

相对 CSS 选择器的结果。

相对 JSPath 的结果。

JS 只返回第一个元素，而上面的 css 选择器返回多个。我需要在 JS 中进行哪些更改才能保持结果不变。

【问题讨论】：

试试querySelectorAll?

【参考方案1】：

Document.querySelector()

Document 方法querySelector() 返回文档中与指定选择器或选择器组匹配的第一个WebElement。如果未找到匹配项，则返回 null。

注意：匹配是使用深度优先的前序遍历完成的 文档的节点从文档的第一个元素开始 标记并按数字顺序遍历顺序节点 子节点。

语法：

element = document.querySelector(selectors);

---

Document.querySelectorAll()

Document 方法querySelectorAll() 返回一个静态NodeList，表示与指定选择器组匹配的文档元素列表。

注意：虽然 NodeList 不是 Array，但可以 使用 forEach() 对其进行迭代。也可以转换成真实的 Array 使用 Array.from()。但是，一些较旧的浏览器没有实现 NodeList.forEach() 和 Array.from()。这个可以 使用 Array.prototype.forEach() 绕过。

语法：

elementList = parentNode.querySelectorAll(selectors);

---

使用 CssSelector

虽然使用xpath 或css-selectors 将返回与指定选择器组匹配的文档元素列表。

---

结论

如上所述，当您使用 querySelector() 时，仅返回第一个匹配元素。如果您的用例是返回所有匹配的元素，您需要使用 querySelectorAll() 作为：

document.querySelector("div[slot^='Learner']>div>div>span")

【参考方案2】：

你必须使用

document.querySelectorAll();