Chrome DevTools: Loop through NodeList

Question

On a page, I have a table with multiple rows (mostly 100), each having multiple columns. Every row has an anchor with the class .no-red.

I am using chrome dev tools console to fetch this anchor element using

document.querySelectorAll('.no-red')

This returns me an array

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]

I want to loop inside this list and extract the text of each anchor element.

Here's a sample of one anchor element

<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> 

How do I get the text of all the 100 anchor elements?

Answer 1

Building on wOxxOm's answer.

To select the text content (the text in between the HTML tags) of an element whose CSS class name is 'no-red'

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

First, open the Chrome Developer Tools by either clicking on the right-hand menu with the dots in Chrome, then click More tools and then Developer Tools, or use the key combination Ctrl+Shift+I

Next, click on the Console tab

Type at the flashing cursor,

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

This will extract the text content of the corresponding element with a class of 'no-red'. But it won't make it available to you to do anything else.

If you are attempting this operation in order to extract the text and then copy and paste into some other application or code then you can type the following at the cursor to select the text you need and copy it to the clipboard from where you can change to your program/software of choice and paste from the clipboard using the Edit > Paste menu item, or Ctrl+V key combination

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