8

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?

4
  • 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)); Apr 19, 2018 at 22:47
  • 3
    Actually, this link is probably a better intro to xpath Apr 19, 2018 at 22:54
  • Thanks, Jaromanda. That was very helpful.
    – kalinma
    Apr 20, 2018 at 18:25
  • If you'd like to copy your comment to an answer, I can give you credit for the correct answer.
    – kalinma
    Apr 20, 2018 at 18:32

2 Answers 2

8

So, just in case anyone else is searching for the answer to my question above, Jaromanda's answer in the comments 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);
}
4
  • Would be nice to have a bit more extensive information for example linking to the documentation. Do you know a good source to dig deeper?
    – lony
    Jun 10, 2020 at 16:40
  • As I stated above, Jaromanda's answer linked to a good reference. Here it is again, developer.mozilla.org/en-US/docs/Web/XPath/…
    – kalinma
    Jun 11, 2020 at 17:22
  • Amazing that’s what I hoped for. Sorry for not following up on the above, didn’t expect it there.
    – lony
    Jun 12, 2020 at 7:20
  • Glad to be of help! Afterall, it was Jaromanda who helped me with this problem.
    – kalinma
    Jun 12, 2020 at 21:25
0

late example for newcomers 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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.