What is the best way to uniquely identify a DOM node?

Question

What is a way to uniquely identify all DOM nodes in an HTML document. To illustrate what I mean, here is a (fictional) example:

• Script X randomly selects a DOM node from document.html.
• Script X needs to tell script Y which DOM node it has chosen.
• How does script X uniquely identify the DOM node it has chosen so that script Y knows exactly which node it is in document.html?

I'm really interested in how to uniquely identify the DOM node so that the script Y can identify it and manipulate it. Preferably, it should work with text nodes as well. I was thinking of XPath maybe, but I'm not sure how to generate a unique XPath to any given node.

Answer 1

You should be able to determine a unique XPath by working backwards from the node to the root node, and tracking the node you're on, and which sibling it is, such that you get something like:

/a[1]/b[2]/c[101]/text()

so that's the 101st C node under the second B node, etc. As such, that's a unique path and can be copied around with reference to the original document

Answer 2

You might want to take a look at XPathGen https://github.com/amouat/XPathGen

It will create a unique XPath of the form /node()[1]/node()[1] for a given DOM node. However, there are some issues with XPath, namely non-coalesced text nodes and "prolog" nodes, which cannot be uniquely identified purely with XPath. For example if you have the following document in DOM:

<a>b</a>

And add a text node to become:

<a>bc</a>

The XPath to nodes b and c will be the same, but you will still have separate DOM nodes (unless you call normalize on the document). If you need to handle this situation you will need to store offsets and lengths for text nodes.