Any clever ways to serialize an HTML element? - Javascript

Question

Hi folks,

I'm trying to store a reference of an HTML tag for later reuse.

e.g. If I click on a div and save a pointer to that div within Javascript, will there be a way I could serialize such pointer? So I could de-serialize it and use the pointer in another instance of the web application?

---

Only methods I can think of are the following:

• Use id or name attributes

• Create a CSS selector for that element

Any other ideas guys? =)

Answer 1

Only logical way is to use id.

It is ussually not hard to assign id to all important elements based on database values.

Answer 2

I've tried something like this:

{tag:"div", style:"float:left;", "class":"fancy", inner:[
  {tag:"a", href:"http://google.com", inner:"A link to google!" },
  {tag:"a", href:"http://yahoo.com", inner:"A link to yahoo!" }
]}

Seems to work okay, although it's easy to get lost with all the curly brackets.

edit - maybe I completely misunderstood what you want... if you want to serialize a handle to that element, like what would be returned by getElementById, you might as well just use the id.

Answer 3

It looks like JSON.stringify( yourDivReference ) and JSON.parse( serializedObjectString ) might do what you're looking for.

UPDATE: Actually, the JSON methods don't like the circular references in the DOM. See this question for more details: http://stackoverflow.com/questions/2303713/how-to-serialize-dom-node-to-json

I do, however, agree with Sergey that using the ID seems like a better way to go.

Answer 4

What exactly are you trying to save? And where exactly are you re-using it?

A DOM element would be very specific to that particular browser rendering on that page -- Just hitting refresh will give you an whole new DOM element. So, what about it do you need to save & recreate?

Answer 5

How about the innerHTML of the element?

Answer 6

Based on the way you worded your question, I don't think that would be possible. What exactly do you mean by "another instance of the web application"? Since JavaScript will be running on the client side, you won't be able to share data between clients. However, you might want to do something like store/read from a database. Can you describe more of the functionality you are trying to achieve?

Answer 7

XPath seems to be the most appropriate; however, only if the page structure is (relatively) static up to that node. Here are some references and code:

Method for getting the xpath of an arbitrary node and example use

getPathTo($("a")[4]):

yields

"id("hlinks-custom")/A[2]"

MDC XPath documentation

Answer 8

Another idea - to generate own custom id's for all elements based on some rules:

1. element id starts from parent id. -> customid = "body/item"
2. If normal id is available use it. if not, use element type. Than add order in current subtree.

so, you will get something like "body-0/item-0" for example above or "body-0/div-4" if id is not known.

When you will try to use your "custom id" and page will be changed, you will have a chance to find closest element, comparing all elements custom id to stored "custom id".