I am traversing a HTML document using javascript DOM. I want make a list (an array actually) of all nodes/elements and their values. I found a script for traversing DOM, but how do I store each node value in an array. I can't seem to find the unique identifier for a node. Anyone has any pointers? I was thinking of xpath or something.

Is it a good idea to consider xpath for node as the unique identifier. If so how do I get xpath of a element while traversing the DOM?

I am traversing a HTML document using javascript DOM. I want make a list (an array actually) of all nodes/elements and their values. I found a script for traversing DOM, but how do I store each node value in an array. I can't seem to find the unique identifier for a node. Anyone has any pointers? I was thinking of xpath or something.

Is it a good idea to consider xpath for node as the unique identifier. If so how do I get xpath of a element while traversing the DOM?

• javascript
• dom

• 1 Have you considered that a list of all elements and values is the DOM? – annakata Commented May 19, 2009 at 10:39
• After you have the elements in an array, what are your plans? If it is to traverse the array it would be easier to just traverse the DOM. – David Robbins Commented May 19, 2009 at 10:45
• Related. – Albert Commented Oct 8, 2021 at 20:21
• Related. – Albert Commented Oct 8, 2021 at 20:23
• Related. – Albert Commented Oct 8, 2021 at 20:24

2 Answers 2

As programmer born and brought up in the world of C and C++, my first answer to this kind of question would have been "store their addresses in the array!". But after a couple years of messing around with the web way of things, I can give the right answer:

In javascript, you can directly store the references to the objects in the array. And no, xpath is not a good idea for this; using references is simpler and better. So a direct answer to your question is: there is no unique identifier for a DOM element/node except itself.

In javascript, all objects are passed around by reference. So here's a sample code for how to do it:

var theArray = [];
var theNodeToTraverse = document.getElementById('domelementtosearch');

traverseAndStore(theNodeToTraverse);

function traverseAndStore( node )
{
    if( node==null) return;
    theArray[ theArray.length ] = node;
    for( i=0; i<node.childNodes.length; i++ )
        traverseAndStore( node.childNodes[i] );
}

You can get something similar to xpath with something like this. It traverses the dom upwards from the input element through the parentNode property.

https://gist.github.com/sebjwallace/3c0a6f7493ce23134516

It will output a string like this.

"#document/HTML/BODY/DIV"

var getElementPath = function(el){
  var path = el.nodeName;
  var parent = el.parentNode;
  while(parent){
    path = parent.nodeName + '/' + path;
    parent = parent.parentNode;
  }
  return path;
}

EDIT: The question seems to point to a simple flatmap solution. I think my original answer was aimed at generating an address for each node in the DOM. This solution almost as basic as flatmap. Well, the DOM is a tree with N children per node. Given a snapshot of the DOM you can generate an address of each element given the child index. As an example of stackoverflow's DOM, grabbing the one of the nodes 5 levels deep - the address is 01001. Each address will be unique for every element in the DOM. This won't work if you need a static address for a dynamic web app however.