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 set the id attribute to a computed value. There is a function in the prototype library that can do this for you.

http://www.prototypejs.org/api/element/identify

My favorite javascript library is jQuery. Unfortunately jQuery does not have a function like identify. However, you can still set the id attribute to a value that you generate on your own.

http://docs.jquery.com/Attributes/attr#keyfn

Here is a partial snippet from jQuery docs that sets id for divs based on the position in the page:

  $(document).ready(function(){

    $("div").attr("id", function (arr) {
          return "div-id" + arr;
        });
  });

Answer 2

In javascript, you could attach a custom ID field to the node

if(node.id) {
  node.myId = node.id;
} else {
  node.myId = createId();
}

// store myId

It's a bit of hack, but it'll give each and every node an id you can use. Of course, document.getElementById() won't pay attention to it.

Answer 3

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:

<div>
    <div />
    <div>
        <div />
        <div />
    </div>
</div>

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.

Answer 4

If you're not modifying the DOM you can get them all by indexed order:

(Prototype example)

myNodes = document.body.descendants()
alert(document.body.descendants()[1].innerHTML)

You could loop through all of the nodes and give them a unique className that you could later select easily.

Answer 5

Use mouse and/or positional properties of the element to generate a unique ID.

Answer 6

You can also use pguid (page-unique identifier) for unique identifier generation:

 pguid = b9j.pguid.next() // A unique id (suitable for a DOM element)
                          // is generated
                          // Something like "b9j-pguid-20a9ff-0"
 ...
 pguid = b9j.pguid.next() // Another unique one... "b9j-pguid-20a9ff-1"

 // Build a custom generator
 var sequence = new b9j.pguid.Sequence({ namespace: "frobozz" })
 pguid = sequence.next() "frobozz-c861e1-0"

http://appengine.bravo9.com/b9j/documentation/pguid.html