CODEWITHSUNDEEP
javascriptdom
Timothée Boucher
Timothée Boucher

Reputation: 1565

What information about a DOM element would allow JavaScript to identify it (somewhat) uniquely? (e.g. when it doesn't have `id`)

Here's what I'm trying to do: I have a bookmarklet that is looking for elements in the current page (which can be any site) and dispatch a click event on the ones that match. I have that part working.

In some cases though, nothing matches automatically and I want to be able to show (by hovering it) what element should be activated and then save some info about it in localStorage. The next time I'm using the bookmarklet on that page, I want to retrieve that info to identify the element in the DOM and then dispatch a click event.

The question is: what information should I save to be able to identify it? (in most cases, since it will always be possible to create a case where it doesn't work)

In the best case, said-element will have an id value and I'm good to go. In some other cases, it won't and I'd like to see your suggestions as to what info and what method I should use to get it back.

So far my idea is to save some of the element's properties and traverse the DOM to find elements that match everything. Not all properties will work (e.g. clientWidth will depend on the size of the browser) and not all types of elements will have all properties (e.g. a div node won't have a src value), which means that on one hand, I can't blindly save all properties, but on the other, I need to either choose a limited list of properties that will work for any kinds of element (at the risk of losing some useful info) or have different cases for different elements (which doesn't sound super great).

Things I was thinking I could use:

So, my question is a bit "how would you go about this?", not necessarily code. Thanks!

Upvotes: 3

Views: 1057

Answers (4)

Josh Stodola
Josh Stodola

Reputation: 82483

What about using the index (integer) of the element within the DOM? You could loop through every element on page load and set a custom attribute to the index...

var els = document.getElementsByTagName("*");
for(var i = 0, l = els.length; i < l; i++) {
  els[i].customIndex = i;
}

Upvotes: 0

Pointy
Pointy

Reputation: 413720

You could do what @brendan said. You can also make up a jQuery-style selector string for each element in the DOM by figuring out the element's "index" in terms of its place in its parent's list of child nodes, and then building that up by walking up the DOM to the body tag.

What you'd end up with is something that looks like

body > :nth-child(3) > :nth-child(0) > :nth-child(4)

Of course if the DOM changes that won't work so good. You could add class names etc, but as you said yourself things like this are inherently fragile if you don't have a good "id" to start with, one that's put there at page creation time by whatever logic knows what's supposed to be in the page in the first place.

Upvotes: 2

Phil Rykoff
Phil Rykoff

Reputation: 12087

an approach would be using name, tagName and className-combination. innerHTML could may be too big.

another approach would be to look for child elements of your choosen element which have an id.

check for id => check for childs with id => check for name, tagName and className-combination (if => tell user to choose a different item :-)

Upvotes: 1

brendan
brendan

Reputation: 29976

What about finding all elements without an ID and assigning them a unique id. Then you could always use id.

Upvotes: 1

Related Questions