How to use Array.from with a XPathResult?

Question

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?

It's so cumbersome to get the 2nd element. You can't do it in one line. — Sridhar Sarnobat
– Sridhar Sarnobat, Commented Sep 5, 2023 at 2:04

Avindra Goolcharan · Accepted Answer · 2025-02-07 00:32:59Z

18

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

Those that are "array-like" that have a .length property.
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;

while ((node = xPathResult.iterateNext())) {
  nodes.push(node);
}

...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.

edited Feb 7, 2025 at 0:32

Avindra Goolcharan

4,3113 gold badges45 silver badges44 bronze badges

answered Oct 30, 2017 at 14:27

Explosion Pills

193k56 gold badges342 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chinoto Vokro Over a year ago

To avoid duplication and (imo) make it clearer, you could instead do const nodes = []; let node; while (node = xPathResult.iterateNext()) {nodes.push(node);}. Too bad you can't just say while (const node = xPathResult.iterateNext()) {...} since the value isn't used outside the loop.

Sérgio Carvalho · Accepted Answer · 2022-06-08 15:15:44Z

Building up on the answer from @JamesTheAwesomeDude, you can use Array.from (or the spread operator) if you polyfill the iterator onto XPathResult. This iterator is just a bit better because it can operate on all types of XPathResult:

if (!XPathResult.prototype[Symbol.iterator]) XPathResult.prototype[Symbol.iterator] = function* () {
    switch (this.resultType) {
        case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
        case XPathResult.ORDERED_NODE_ITERATOR_TYPE:
            let result;
            while ( (result = this.iterateNext()) != null ) yield result;
            break;
        case XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE:
        case XPathResult.ORDERED_NODE_SNAPSHOT_TYPE:
            for (let i=0; i < this.snapshotLength; i++) yield this.snapshotItem(i);
            break;
        default:
            yield this.singleNodeValue;
            break;
    }
};

JamesTheAwesomeDude · Accepted Answer · 2022-09-26 20:56:40Z

As the existing answer states, this is not "supported" per se, because (for some bizarre reason) XPathResult doesn't support JS' standard iteration protocols at all.

You could always DIY it, I suppose; this would, naturally, work with your use-case, Array.from:

function xpr2iter (xpr) {
  // Produce a JavaScript iterator for an *ITERATOR_TYPE XPathResult
  // or a JavaScript iterable for a *SNAPSHOT_TYPE XPathResult
  switch (xpr.resultType) {
    case XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE:
    case XPathResult.ORDERED_NODE_SNAPSHOT_TYPE:
      return {
        [Symbol.iterator] () {
          var i = 0;
          return {
            next() {
              var node = xpr.snapshotItem(i++);
              return {value: node, done: !node};
            }
          };
        },
        at(i) {
          return xpr.snapshotItem(i) || undefined;
        }
      };
    case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
    case XPathResult.ORDERED_NODE_ITERATOR_TYPE:
      return {
        next() {
          var node = xpr.iterateNext();
          return {value: node, done: !node};
        },
        [Symbol.iterator] () {
          return this;
        },
      };
  }
}


// As an example, pull the top child elements
// -- should just be the <head> and <body>:
let example1_xpr = document.evaluate('/html/*', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);
// -- render into an Array:
let example1_arr = Array.from(xpr2iter(example1_xpr));

// Can be rendered to an array!
console.log("length:", example1_arr.length);
console.log("map demo (e => e.tagName):", example1_arr.map(e => e.tagName));

...however, it also supports for...of directly without instantiating a whole Array:

function xpr2iter (xpr) {
  // Produce a JavaScript iterator for an *ITERATOR_TYPE XPathResult
  // or a JavaScript iterable for a *SNAPSHOT_TYPE XPathResult
  switch (xpr.resultType) {
    case XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE:
    case XPathResult.ORDERED_NODE_SNAPSHOT_TYPE:
      return {
        [Symbol.iterator] () {
          var i = 0;
          return {
            next() {
              var node = xpr.snapshotItem(i++);
              return {value: node, done: !node};
            }
          };
        },
        at(i) {
          return xpr.snapshotItem(i) || undefined;
        }
      };
    case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
    case XPathResult.ORDERED_NODE_ITERATOR_TYPE:
      return {
        next() {
          var node = xpr.iterateNext();
          return {value: node, done: !node};
        },
        [Symbol.iterator] () {
          return this;
        },
      };
  }
}

let example2_xpr = document.evaluate('/html/*', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);

for( let e of xpr2iter(example2_xpr) ) {
  // It's iterable!
  console.log(e.tagName);
}

Therefore, this solution is slightly more general (and it should also use slightly less memory when iterating over obscenely large amounts of nodes without instantiating an Array).

I can find 138 td nodes in my sample document.

In fact, juuust in case this is an A/B problem and you're only trying to find the number of matches, that can be got directly by the .snapshotLength property of non-iterator types (or you can "manually" count an iterator type, if you prefer):

function xpr2iter (xpr) {
  // Produce a JavaScript iterator for an *ITERATOR_TYPE XPathResult
  // or a JavaScript iterable for a *SNAPSHOT_TYPE XPathResult
  switch (xpr.resultType) {
    case XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE:
    case XPathResult.ORDERED_NODE_SNAPSHOT_TYPE:
      return {
        [Symbol.iterator] () {
          var i = 0;
          return {
            next() {
              var node = xpr.snapshotItem(i++);
              return {value: node, done: !node};
            }
          };
        },
        at(i) {
          return xpr.snapshotItem(i) || undefined;
        }
      };
    case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
    case XPathResult.ORDERED_NODE_ITERATOR_TYPE:
      return {
        next() {
          var node = xpr.iterateNext();
          return {value: node, done: !node};
        },
        [Symbol.iterator] () {
          return this;
        },
      };
  }
}

let example3_xpr = document.evaluate('/html/*', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);

let example3_n = example3_xpr.snapshotLength;

console.log("number of matches:", example3_n);


let example4_xpr = document.evaluate('/html/*', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE);

let example4_n = 0;
for( let e of xpr2iter(example4_xpr) )
  example4_n ++;

console.log("number of matches:", example4_n);

Collectives™ on Stack Overflow

How to use Array.from with a XPathResult?

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related