使用querySelectorAll，如何在某些情况下捕获属性，在其他情况下捕获整个元素

Question

使用节点并具有类似的功能：

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

假设我想从<p>和<h1>捕获innerText，但不从<a>捕获，因为我只希望从<a>捕获href属性，并且当使用map函数时，innerText也将被返回，从而用不必要的信息填充数组。

有没有一种简单的方法可以在查询选择器函数上做到这一点？

或者甚至是在地图功能上简单的方法？

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的一个古怪、难以使用的版本。