Используя querySelectorAll, как я могу поймать атрибуты в некоторых случаях и весь элемент в других случаях?

Question

Используя узел и имея что-то похожее на это:

const carsforsale = Array.from(document.querySelectorAll(div > p, div > a, div> div > h1))
return carsforsale.map(elem => elem.innerText)

Допустим, я хотел поймать innerText из <p> и <h1>, но не из <a>, так как я просто хочу hrefатрибут из <a> и innerText также будут возвращены при использовании функции map, заполняя массив ненужной информацией.

Есть ли простой способ сделать это с помощью функции выбора запроса?

Или даже простой способ сделать это с помощью функции карты?

Answer 1

Обратите внимание, что Array.from принимает второй аргумент, который является функцией отображения - всякий раз, когда у вас есть Array.from, за которым следует .map, вы можете сжать это в один Array.from.

Внутри функции mapper вам просто нужно проверить tagName элемента, который вы перебираете:

return Array.from(
  document.querySelectorAll('div > p, div > a, div> div > h1'),
  elem => (
    elem.tagName === 'A' ? elem.href : elem.innerText
  )
);

Также обратите внимание, что когда вы используете строки, они должны быть заключены в разделители, такие как ', " или `.(document.querySelectorAll(div > p, div > a, div> div > h1) приведет к SyntaxError)

Примечание: вы вероятно хотите textContent вместо innerText.innerText - это причудливая, сложная в использовании версия textContent в большинстве случаев.