abi•2y ago

Using querySelector on Node

I am doing something like:

const nodeList: NodeList = document.querySelectorAll(".foo");
const nodes = [...nodeList];
const result = nodes.map((n: Node) => n.querySelector("span"));

const nodeList: NodeList = document.querySelectorAll(".foo");
const nodes = [...nodeList];
const result = nodes.map((n: Node) => n.querySelector("span"));

The above will not work because querySelector is not from Node, but rather Element. Is there any good way to do this without manually tossing around Nodes?

4 Replies

abi•2y ago

Btw, my example is contrived, the real world use case is different. I really can't do it with just one querySelectorAll call in my case.

Andreu Botella (they/them)•2y ago

even though the returned type is NodeList, only elements can match a (non-pseudo-element) selector and I don't think querySelector(All) works with pseudo-element selectors

abi•2y ago

So I could just cast it?

Andreu Botella (they/them)•2y ago

yeah