Я создаю массив элементов DOM и выбираю тег img, а затем ряд тегов p, как я могу получить внутреннюю HTML из p и sr c ссылку из img? - PullRequest
0 голосов
/ 29 февраля 2020

Вот как я создаю массив: const textData = Array.from(document.querySelectorAll('.product-image, .product-detail > p'))

Содержимое массива - это тег img, за которым следует количество тегов p и, в зависимости от количества элементов на странице, больше тегов img. за которыми следуют дополнительные теги p, я хотел бы отобразить или l oop через элементы и в зависимости от того, что это за элемент, заменить его в массиве его внутренним HTML (для тега p) или его sr * 1007. * ссылка (тег img). Как я могу добиться этого в узле? Я не могу понять, как выполнить l oop, определить тип тега и выполнить указанную операцию.

Ответы [ 2 ]

1 голос
/ 29 февраля 2020

Вы можете отобразить массив элементов, как показано ниже:

const textData = Array
  .from(document.querySelectorAll('.product-image, .product-detail > p'))
  .map(element => {
    if (element.tagName === 'IMG') return element.src
    if (element.tagName === 'P') return element.innerHTML
    return null
  })

Если вы хотите фильтр null в массиве:

const textData = Array
  .from(document.querySelectorAll('.product-image, .product-detail > p'))
  .map(element => {
    if (element.tagName === 'IMG') return element.src
    if (element.tagName === 'P') return element.innerHTML
    return null
  })
  .filter(item => item !== null)

Ниже приведен пример кода выше:

example of above code

Это точно извиняется за пределами панели консоли в devtools текущей страницы: { ссылка }

1 голос
/ 29 февраля 2020

Вы можете использовать карту и tagNAme

textData.map((element) => {
  if (element.tagName === 'IMG') return element.src;
  if (element.tagName === 'P') return element.innerHTML;
  return '';
})
...