Unique identifier for HTML elements

Question

Besides of the ID, if you say, you want a unique identifier for an HTML element (let say a div).

I browsed the DOM for something (like a number or string) that is unique for each element; but the DOM is big and I failed to find that in the Internet.

Is there any property (in the DOM obviously) that is unique only to that element? (Other than the ID and also you don't specify it, but comes when the DOM is constructed)

Answer 1

There is the name attribute that can be addresses by document.getElementByName.

I don't think other unique identifiers exist - even though you could simulate one by setting a property (like title) to a unique value, and then query for that. But that is kludgy.

What exactly do you need this for? If you give more information about your situation, somebody will probably come up with a suggestion.

Answer 2

The only other identifier I can think of is the XPath of the element in the document.

For instance, the title link inside the heading of this very page has an XPath of

/html/body/div[3]/div[2]/div/h1/a

But like Pekka already said, it depends on what you want to do. And I dont think you can get the Xpath easily from the DOM in JavaScript, despite Xpath being available nowadays in JS engines.

Answer 3

No there is no unique identifier for a DOM element. However each node is unique so you could store the reference to the node.

var array = [];
var node = document.getElementById('somedomelement');

traverse(node);

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

Answer 4

As Pekka says, it would be easier if you would describe what you want to do. Until then here are two suggestions.

Unless you actually need to express the id as some kind of string you can save the normal DOM reference.

If you do need to express it as a string for some reason, then you'll need to assign a unique id yourself.

var getId = (function () {
  var incrementingId = 0;
  return function(element) {
    if (!element.id) {
      element.id = "id_" + incrementingId++;
      // Possibly add a check if this ID really is unique
    }
    return element.id;
  };
}());