Chrome DevTools: цикл через NodeList
На странице у меня есть таблица с несколькими строками (в основном 100), каждая из которых имеет несколько столбцов. Каждая строка имеет привязку с классом .no-red.
Я использую консоль chrome dev tools для извлечения этого элемента привязки с помощью
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 якорных элементов?
Спасибо @Gotrank. Где мне это набрать? Я использую консоль Google.
Если вы напишете это в консоль, у вас будет переменная, которая содержит список строк с текстом элементов.
Я сделал. Uncaught SyntaxError: Неожиданный токен var.
@CuriousDev - вам понадобятся точки с запятой между операторами, если вы не собираетесь помещать их все в отдельную строку. Таким образом, вам понадобится 1, а нужно использовать 2 из них. Один в конце, другой после вызова querySelectorAll. ;)
Я тоже пробовал. Uncaught TypeError: 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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Основываясь на ответе wOxxOm.
Чтобы выбрать текстовое содержимое (текст между тегами HTML) элемента, чье имя класса CSS - 'no-red'
<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'))
можно попробовать что то вроде этого
var list = document.querySelectorAll('.no-red') var stringmap = list.map(x => x.textContent)