relative xpath to absolute xpath with javascript

Question

Is it possible to get an absolute xpath given the relative one of a dom node, using javascript?

The closest I have found refers to getting xpath for a node: Get Xpath from the org.w3c.dom.Node

Moreover, I get relative xpaths for nodes without unique identifiers. Any ideas how to work around this?

For example, for:

 <p>DUKE SOLINUS</p>
 <div>
 <p>AEGEON</p> 
 </div>

and for selected words "DUKE", and "AEGEON", I get xpaths "/p[1]", AND "/div[1]/p[1]" respectively, which when passed to document.evaluate function both evaluate to the same node "DUKE SOLINUS". So, I only have these relative xpaths, and do not have nodes. What I want is to evaluate these relative xpaths to correct nodes i.e. the two different nodes in this case (DUKE SOLINUS and AEGEON).

To be more specific, xpaths are taken from json annotation object: http://docs.annotatorjs.org/en/v1.2.x/annotation-format.html

Any help would be appreciated! Thanks a lot!

This might be one of those questions where, whatever elegant answer you come up with, I can build a scenario where it will fail. Assigning IDs to every single node would work, but that would suck. Why do you need the absolute xpath anyway? Perhaps there's a solution where you don't. — James, Mar 30 '16 at 23:00
Thanks a lot for the answer! I was afraid to hear that, but I still hope there will be an answer. I have a relative path of a selected text on a page (I also have that text - not particularly useful), and I need to replace that text with some other text. As relative path I get is not always unique (I will update my question with the example), document.evaluate function will evaluate to the same node. — Maksim, Mar 30 '16 at 23:27

James · Answer 1 · 2016-03-31T00:39:04.747

This function will find a cardinal absolute xpath to a given node. If the order of any nodes changes, or nodes are added or deleted, then this won't work. But for static content it should be fine.

function getXpathOfNode(domNode,bits) {
  // uses cardinality.  Will not work if any nodes are added/moved/removed in the DOM.  Fine for static stuff.
  bits = bits ? bits : [];
  var c = 0;
  var b = domNode.nodeName;
  var p = domNode.parentNode;

  if (p) {
    var els = p.getElementsByTagName(b);
    if (els.length >  1) {
      while (els[c] !== domNode) c++;
      b += "[" + (c+1) + "]";
    }
    bits.push(b);
    return getXpathOfNode(p, bits);
  }
  
  //bits.push(b);  // this is #document.  Probably dont need it.
  return bits.reverse().join("/");
}
// testing
var xp = getXpathOfNode(document.getElementById("pickme"));
var r = document.getElementById("result");
r.innerHTML = "the xpath is " + xp + "<br>";
var result =  document.evaluate(xp, document, null, XPathResult.ANY_TYPE, null);
r.innerHTML += "the chosen node contains - " + result.iterateNext().innerHTML;

<div>
<div>junk</div>
<span>irrelevant</span>
<div>pointless
<div>
<div id="pickme">this is the test node</div><span>don't read this</span></div>
<br><br>
<div id="result"></div>
</div>

thanks a lot, but now I am not sure if i explained properly what i need (i updated the question again :)). the function you suggested accepts a node and then works out its xpath. what i need is to get the node when having only a relative xpath. document.evaluate will not always return me a unique node (such as in the given example). that is why I thought it might be easier to get absolute xpaths from given relative ones and then use document.evaluate. — Maksim, Mar 31 '16 at 10:41
Do you have the node to which your xpaths are relative? If it were `
` you could do `document.evaluate(relativeXpath, document.getElementById('content'), ...` — James, Mar 31 '16 at 12:22
I am not sure if I can get it, but I will check it out. Thanks for suggestion! — Maksim, Mar 31 '16 at 12:35

relative xpath to absolute xpath with javascript

1 Answers1