Unique element ID, even if element doesn't have one

Question

I\'m writing a GreaseMonkey script where I\'m iterating through a bunch of elements. For each element, I need a string ID that I can use to reference that element later. The

Answer 1

You can generate a stable, unique identifier for any given node in a DOM with the following function:

function getUniqueKeyForNode (targetNode) {
    const pieces = ['doc'];
    let node = targetNode;

    while (node && node.parentNode) {
        pieces.push(Array.prototype.indexOf.call(node.parentNode.childNodes, node));
        node = node.parentNode
    }

    return pieces.reverse().join('/');
}

This will create identifiers such as doc/0, doc/0/0, doc/0/1, doc/0/1/0, doc/0/1/1 for a structure like this one:

There are also a few optimisations and changes you can make, for example:

• In the while loop, break when that node has an attribute you know to be unique, for example @id

• Not reverse() the pieces, currently it is just there to look more like the DOM structure the ID's are generated from

• Not include the first piece doc if you don't need an identifier for the document node

• Save the identifier on the node in some way, and reuse that value for child nodes to avoid having to traverse all the way up the tree again.

• If you're writing these identifiers back to XML, use another concatenation character if the attribute you're writing is restricted.