Chrome DevTools：循环遍历 NodeList答案

【问题标题】：Chrome DevTools: Loop through NodeListChrome DevTools：循环遍历 NodeList
【发布时间】：2018-09-02 08:24:31
【问题描述】：

在一个页面上，我有一个包含多行（大多数为 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 个锚元素的文本？

【问题讨论】：

你可以试试var list = document.querySelectorAll('.no-red') var stringmap = list.map(x => x.textContent)
谢谢@Gotrank。我在哪里输入这个？我正在使用 Google 控制台。
我也试过了。未捕获的类型错误：list.map 不是函数
(1) $$('.no-red').map(e => e.textContent) (2) copy($$('.no-red').map(e => e.textContent).join('\n')) //复制到剪贴板
@CuriousDev 使querySelectorAll 的结果首先像var entries = Array.from($0.querySelectorAll('li')) 这样的数组。然后在这个数组上调用map。

标签： javascript google-chrome google-chrome-extension css-selectors google-chrome-devtools

【解决方案1】：

以 wOxxOm 的回答为基础。

选择 CSS 类名为“no-red”的元素的文本内容（HTML 标记之间的文本）

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

首先，通过单击 Chrome 中带有点的右侧菜单打开 Chrome 开发者工具，然后依次单击更多工具和开发者工具，或者使用组合键 Ctrl+Shift+I

接下来，点击控制台标签

在闪烁的光标处键入，

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

这将提取具有“no-red”类的相应元素的文本内容。但它不会让您可以做任何其他事情。

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

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

【讨论】：