Question

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:

• id of course
• className, tagName would help, though className is likely to not be a clear match in some cases
• innerHTML should work in a lot of cases if the content is text
• src should work in most cases if the content is an image
• the hierarchy of ancestors (but that can get messy)
• …?

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

Answer 1

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 🙂