'Unique identifier for HTML elements

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

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

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

javascripthtmldom


Solution 1:[1]

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 don’t think you can get the XPath easily from the DOM in JavaScript, despite XPath being available nowadays in JavaScript engines.

Solution 2:[2]

Internet Explorer has a property, "uniqueID", for every element. The problem is that the other browsers don't support it.

Solution 3:[3]

You can use a library or roll your own to create a unique identifier. jQuery has .data():

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

Solution 4:[4]

I just encountered the same situation, and while I was looking into some DOM elements in the Chrome developer tools inspector, I noticed that they all seem to have a property like jQuery11230892710877873282 assigned with a unique number.

Obviously the number after 'jQuery' is different every time you load the page. My guess is that jQuery is generating this internally every time it tries to access or manipulate any DOM element.

I played a little bit with it, and it looks like elements that are never accessed/manipulated by jQuery may not have this property, but the moment you do something like $(elem), the property will be there. So, since we're using both jQuery and Lodash, I devised the following function to return a unique ID regardless of whether the element actually has a DOM id attribute.

_.reduce(
    $(elem), 
    function(result, value, key) { 
        if(_.startsWith(key, 'jQuery')) 
            return value;
        }, 
    0)

Solution 5:[5]

There is the name attribute that can be addressed 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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Peter Mortensen
Solution 2 Peter Mortensen
Solution 3 Peter Mortensen
Solution 4 Peter Mortensen
Solution 5 Peter Mortensen

Related Questions