Chrome 开发者工具：如何遍历 NodeList

Question

在一个页面上，我有一个包含多行（大部分有100行）和多列的表格。每一行都有一个类名为.no-red的锚点。

我正在使用Chrome开发者工具控制台来获取这个锚点元素，方法是：

document.querySelectorAll('.no-red')

这会给我返回一个数组。

NodeList(100) [a.no-red.selectorgadget_selected, 
a.no-red.selectorgadget_suggested, a.no-red.selectorgadget_suggested, 
a.no-red.selectorgadget_suggested, a.no-red.selectorgadget_suggested, 
a.no-red.selectorgadget_suggested, a.no-red.selectorgadget_suggested, 
a.no-red.selectorgadget_suggested, a.no-red.selectorgadget_suggested, 
a.no-red.selectorgadget_suggested, a.no-red.selectorgadget_suggested
....and so on]

我希望循环遍历该列表并提取每个锚点元素的文本。

以下是一个锚点元素的示例：

<a class="no-red selectorgadget_selected" ng-href="https://www.twitter.com/java" target="_blank" href="https://www.twitter.com/java"><i class="fa fa-twitter"></i> java</a> 

如何获取所有100个锚元素的文本？

- CuriousDev

---

谢谢@Gotrank。我在哪里输入这个？我正在使用Google控制台。 - CuriousDev

@CuriousDev - 如果你不打算将它们放在自己的一行中，那么在语句之间需要分号。因此，你需要一个并且应该使用两个。一个在末尾，另一个在 querySelectorAll 调用之后。 ;) - enhzflep

我也试过了。未捕获的类型错误：list.map不是一个函数。 - CuriousDev

(1) $$('.no-red').map(e => e.textContent)(2) copy($$('.no-red').map(e => e.textContent).join('\n')) //将内容复制到剪贴板 - wOxxOm

@CuriousDev 首先将 querySelectorAll 的结果转换为数组，像这样 var entries = Array.from($0.querySelectorAll('li'))。然后在该数组上调用 map。 - Crashalot

Answer 1

基于wOxxOm的回答。

要选择CSS类名为'no-red'的元素的文本内容（HTML标签之间的文本），请执行以下操作：

<a class="no-red">My Text</a>

首先，通过在 Chrome 右侧菜单中点击带有点的选项，然后单击更多工具，再点击开发者工具，或使用快捷键 Ctrl+Shift+I 打开 Chrome 开发者工具。

接下来，单击控制台选项卡。

在光标闪烁处输入：

$$('.no-red').map(e => e.textContent)

这将提取具有“no-red”类的相应元素的文本内容。但是它不会使文本内容可用于其他任何操作。

如果您正在尝试提取文本并将其复制粘贴到其他应用程序或代码中，则可以在光标处键入以下内容以选择所需的文本，并将其从剪贴板复制到您选择的程序/软件，然后使用“编辑”>“粘贴”菜单项或Ctrl+V键组合从剪贴板粘贴。

copy($$('.no-red').map(e => e.textContent).join('\n')) 

- AnotherLongUsername