javascript - Chrome 开发者工具 : Loop through NodeList

Question

在一个页面上，我有一个包含多行(大部分为 100 行)的表格，每行都有多列。每行都有一个带有 .no-red 类的 anchor 。

我正在使用 chrome 开发工具控制台来使用

获取这个 anchor 元素

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]

我想在这个列表中循环并提取每个 anchor 元素的文本。

这是一个 anchor 元素的示例

<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 个 anchor 元素的文本？

Answer 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'))