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

Question

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

在路上，我发现 return 语句在这两者之间是不同的。请检查以下示例。有人能告诉我需要在 JSPath 中进行哪些更改才能使结果与相对 CSS 选择器相同。

相对 CSS 选择器的结果。

相对 JSPath 的结果。

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

Answer 1

Document.querySelector()

文档中的 Document 方法 querySelector() returns the first 与指定的选择器或选择器组匹配。如果未找到匹配项，null 将被 return 编辑。

Note: The matching is done using depth-first pre-order traversal of the document's nodes starting with the first element in the document's markup and iterating through sequential nodes by order of the number of child nodes.

语法：

element = document.querySelector(selectors);

---

Document.querySelector全部()

Document 方法 querySelectorAll() returns a static NodeList 表示与指定选择器组匹配的文档元素列表。

Note: Although NodeList is not an Array, it is possible to iterate over it with forEach(). It can also be converted to a real Array using Array.from(). However, some older browsers have not implemented NodeList.forEach() nor Array.from(). This can be circumvented by using Array.prototype.forEach().

语法：

elementList = parentNode.querySelectorAll(selectors);

---

使用 CssSelector

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

---

结论

如上所述，当您使用 querySelector() 时，只有第一个匹配元素被 returned。如果你的usecase是要return所有的匹配元素，你需要使用querySelectorAll() as:

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

Answer 2

你必须使用

document.querySelectorAll();