Я хочу сразу получить список значений из специального селектора CSS.

Я хочу извлечь текст только в <strong>. Я использую :

document.querySelectorAll("p > strong")

Но у меня есть список узлов ...

NodeList(101) [strong, strong, strong, strong, strong, strong, strong, strong, strong,...]

Я нацелен на innerText, например:

document.querySelectorAll("p > strong")[1].innerText

Как я могу извлечь сразу все целевые текстовые значения в списке?

0
B4b4j1 9 Сен 2021 в 17:09

2 ответа

Лучший ответ

Используйте spread operator, чтобы превратите его в массив, а затем используйте map, чтобы получить то, что вам нужно.

var array = [...document.querySelectorAll("p > strong")].map(a=>a.innerText);

console.log(array);
<p><strong>I</strong></p>
<p><strong>heart</strong></p>
<p><strong>To</strong></p>
<p><strong>Fart</strong></p>
1
I wrestled a bear once. 9 Сен 2021 в 14:14

Ваш код работает, если вы перебираете nodeList, который у вас есть

Я использую textContent - то же самое, но более стандартное

const strong = document.querySelectorAll("p > strong")
const texts = []
for (let i = 0; i< strong.length;i++) texts.push(strong[i].textContent)
console.log(texts)
<p>Here is some <strong>text</strong> and some <strong>more text</strong></p>

В качестве альтернативы, но медленнее (если это имеет значение) сопоставьте список узлов после преобразования в массив с помощью синтаксис распространения

const texts = [...document.querySelectorAll("p > strong")]
  .map(({textContent}) => textContent)
console.log(texts)
<p>Here is some <strong>text</strong> and some <strong>more text</strong></p>

JQuery, если вам нужно

const texts = $("p strong").map((_,e) => e.textContent).get();
console.log(texts)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p>Here is some <strong>text</strong> and some <strong>more text</strong></p>
0
mplungjan 9 Сен 2021 в 14:39