Skip to content

How to use Array.from with a XPathResult?

When I use querySelectorAll, I can find 138 td nodes in my sample document.

Array.from(document.querySelectorAll('td')).length
138

When I do the same with XPath, I get no result:

Array.from(document.evaluate(".//td", document.body, null, XPathResult.ANY_TYPE, null)).length
0

Although there is at least one match:

document.evaluate(".//td", document.body, null, XPathResult.ANY_TYPE, null).iterateNext().nodeName
"TD"

The problem seems to be that Array.from can not iterate over a XPathResult. Even this returns 0:

Array.from(document.evaluate('.', document.body, null, XPathResult.ANY_TYPE, null)).length
0

How to make a XPathResult suitable for Array.from?

Answer

Unfortunately you can’t. Array.from can convert two types of objects into arrays:

  1. Those that are “array-like” that have a .length property.
  2. Those that implement the iterator protocol and allow you to get all of their elements.

XPathResult doesn’t do any of these. You could do this by manually iterating over the result and storing the results in an array such as:

const nodes = [];
let node = xPathResult.iterateNext();
while (node) {
  nodes.push(node);
  node = xPathResult.iterateNext();
}

…but if you’re going to loop over the nodes anyway, you can probably do whatever array operations you wanted to do in the loop.