I need to get an XPathResult with javascript and iterate through it, cloning each node of the result. Initially, I tried the following with the result as ORDERED_NODE_ITERATOR_TYPE:

childNodesXPath = '//div[@id="'+subcat_id+'" and @parentid="'+subcat_parent_id+'"]';    
subcat_child_nodes = document.evaluate(childNodesXPath, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
while (next_child_node = subcat_child_nodes.iterateNext()) {
    new_child_node = next_child_node.cloneNode(true);
    new_child_node.setAttribute('parentid', target_id);
    new_child_node.setAttribute('grandparentid', target_parentid);
    new_length = new_subcat_child_nodes.push(new_child_node);
}

Of course I discovered that the iterator became invalid as soon as the first node was cloned because the DOM changed, so then I tried this with the result as ORDERED_NODE_SNAPSHOT_TYPE:

childNodesXPath = '//div[@id="'+subcat_id+'" and @parentid="'+subcat_parent_id+'"]';
subcat_child_nodes = document.evaluate(childNodesXPath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (i=0; i<subcat_child_nodes.length; i++) {
    new_child_node = subcat_child_nodes[i].cloneNode(true);
    new_child_node.setAttribute('parentid', target_id);
    new_child_node.setAttribute('grandparentid', target_parentid);
    new_length = new_subcat_child_nodes.push(new_child_node);
}

This did not work because there is no length property for the XPathResult object. I also tried subcat_child_nodes.forEach() and that did not work, nor does iterateNext().

How do I iterate through an XPathResult that is of type ORDERED_NODE_SNAPSHOT_TYPE in a way that allows me to clone each node? If that is not possible, is there a way to clone an entire XPathResult that is a list of nodes?

I need to get an XPathResult with javascript and iterate through it, cloning each node of the result. Initially, I tried the following with the result as ORDERED_NODE_ITERATOR_TYPE:

childNodesXPath = '//div[@id="'+subcat_id+'" and @parentid="'+subcat_parent_id+'"]';    
subcat_child_nodes = document.evaluate(childNodesXPath, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
while (next_child_node = subcat_child_nodes.iterateNext()) {
    new_child_node = next_child_node.cloneNode(true);
    new_child_node.setAttribute('parentid', target_id);
    new_child_node.setAttribute('grandparentid', target_parentid);
    new_length = new_subcat_child_nodes.push(new_child_node);
}

Of course I discovered that the iterator became invalid as soon as the first node was cloned because the DOM changed, so then I tried this with the result as ORDERED_NODE_SNAPSHOT_TYPE:

childNodesXPath = '//div[@id="'+subcat_id+'" and @parentid="'+subcat_parent_id+'"]';
subcat_child_nodes = document.evaluate(childNodesXPath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (i=0; i<subcat_child_nodes.length; i++) {
    new_child_node = subcat_child_nodes[i].cloneNode(true);
    new_child_node.setAttribute('parentid', target_id);
    new_child_node.setAttribute('grandparentid', target_parentid);
    new_length = new_subcat_child_nodes.push(new_child_node);
}

This did not work because there is no length property for the XPathResult object. I also tried subcat_child_nodes.forEach() and that did not work, nor does iterateNext().

How do I iterate through an XPathResult that is of type ORDERED_NODE_SNAPSHOT_TYPE in a way that allows me to clone each node? If that is not possible, is there a way to clone an entire XPathResult that is a list of nodes?

• javascript
• xpath

• 3 Everything you wanted to know about XPath but were too afraid to search for ... hint, .snapshotLength and .snapshotItem() - which you can use to create an array if you like: const array = Array.from({length: subcat_child_nodes .snapshotLength}, (_, i) => subcat_child_nodes.snapshotItem(i)); – Jaromanda X Commented Apr 19, 2018 at 22:47
• 3 Actually, this link is probably a better intro to xpath – Jaromanda X Commented Apr 19, 2018 at 22:54
• Thanks, Jaromanda. That was very helpful. – kalinma Commented Apr 20, 2018 at 18:25
• If you'd like to copy your ment to an answer, I can give you credit for the correct answer. – kalinma Commented Apr 20, 2018 at 18:32

2 Answers 2

So, just in case anyone else is searching for the answer to my question above, Jaromanda's answer in the ments pointed me to a reference resource (archive) and this is what I ended up using.

subcat_child_nodes = document.evaluate(childNodesXPath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (i=0; i<subcat_child_nodes.snapshotLength; i++) {
    new_child_node = subcat_child_nodes.snapshotItem(i).cloneNode(true);
    new_child_node.setAttribute('parentid', target_id);
    new_child_node.setAttribute('grandparentid', target_parentid);
    new_length = new_subcat_child_nodes.push(new_child_node);
}

late example for newers if needed:

function iterateXPathResult() {
  let xpath = " //span[text()='Ad'] //ancestor::article";
  let nodes = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

  try {
    let node = nodes.iterateNext();
    while (node) {
      console.log("node", node);
      node = nodes.iterateNext();
    }
  } catch (e) {
    console.error(`Document tree modified during iteration: ${e}`);
  }
}

function iterateXPathResult() {
  let xpath = " //span[text()='Ad'] //ancestor::article";
  let nodes = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

  try {
    let node = nodes.iterateNext();
    while (node) {
      console.log("node", node);
      node = nodes.iterateNext();
    }
  } catch (e) {
    console.error(`Document tree modified during iteration: ${e}`);
    console.warn(`If you don't want to see this error close console on Code Snippet web and open console in your Browser`);
  }
}

iterateXPathResult();

<div class='main'>
  <article id='id-article-1'>
    <span>article 1</span>
  </article>
  <article id='id-article-2'>
    <span>Ad</span>
    <span> 1</span>
  </article>
  <article id='id-article-3'>
    <span>article 3</span>
  </article>
  <article id='id-article-4'>
    <span>Ad</span>
    <span> 2</span>
  </article>
  <article id='id-article-5'>
    <span>article 5</span>
  </article>
  Open the browser console to see the results!
</div>