[我正在创建DOM元素数组，然后选择一个img标签，然后选择一系列p标签，如何从img中获取p和src链接的innerHTML？

Question

这是我创建数组的方式：const textData = Array.from(document.querySelectorAll('.product-image, .product-detail > p'))

[数组内容是一个img标签，后跟大量p标签，并且取决于页面上有多少个项目，更多的img标签后跟更多的p标签，我想根据这些元素映射或循环遍历标记元素是，用其innerHTML（用于p标记）或src链接（img标记）将其替换为数组。如何在节点中实现此目标？我无法弄清楚如何遍历并确定标签类型并执行指定的操作。

Answer 1

您可以使用地图和标签NAme

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

Answer 2

您可以按如下所示映射元素数组：

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)

下面是上面的代码示例：

在当前页面的devtools中，它完全超越了控制台面板：https://stackoverflow.com/posts/60461491