Skip to main content
edited title
Link
Ciro Santilli OurBigBook.com
  • 392.5k
  • 120
  • 1.3k
  • 1.1k

How to serialize DOM node to JSON even if there are circular references?

added 111 characters in body
Source Link
NVI
  • 15.1k
  • 17
  • 69
  • 104

I want to serialize DOM node or even whole window to JSON.

For example:

 >> serialize(document) -> { "URL": "http://stackoverflow.com/posts/2303713", "body": { "aLink": "", "attributes": [ "getNamedItem": "function getNamedItem() { [native code] }", ... ], ... "ownerDocument": "#" // recursive link here }, ... } 

JSON.stringify()

JSON.stringify(window) // TypeError: Converting circular structure to JSON 

The problem is JSON does not support circular references by default.

var obj = {} obj.me = obj JSON.stringify(obj) // TypeError: Converting circular structure to JSON 

window and DOM nodes have many of them. window === window.window as will as document.body.ownerDocument === document.

Also, JSON.stringify does not serialize functions, so this is not what I'm looking for.

dojox.json.ref

 `dojox.json.ref.toJson()` can easily serialize object with circular references: var obj = {} obj.me = obj dojox.json.ref.toJson(obj); // {"me":{"$ref":"#"}} 

Good, isn't it?

 dojox.json.ref.toJson(window) // Error: Can't serialize DOM nodes 

Well not good enough for me.

Why?

I'm trying to make DOM compatibility table for different browsers. For instance, Webkit supports placeholder attribute and Opera doesn't, IE 8 supports localStorage and IE 7 doesn't, and so on.

I don't want to make thousands of test-cases. I want to make generic way for test them all.

Update, June 2013

I made a prototype NV/dom-dom-dom.com.

I want to serialize DOM node or even whole window to JSON.

For example:

 >> serialize(document) -> { "URL": "http://stackoverflow.com/posts/2303713", "body": { "aLink": "", "attributes": [ "getNamedItem": "function getNamedItem() { [native code] }", ... ], ... "ownerDocument": "#" // recursive link here }, ... } 

JSON.stringify()

JSON.stringify(window) // TypeError: Converting circular structure to JSON 

The problem is JSON does not support circular references by default.

var obj = {} obj.me = obj JSON.stringify(obj) // TypeError: Converting circular structure to JSON 

window and DOM nodes have many of them. window === window.window as will as document.body.ownerDocument === document.

Also, JSON.stringify does not serialize functions, so this is not what I'm looking for.

dojox.json.ref

 `dojox.json.ref.toJson()` can easily serialize object with circular references: var obj = {} obj.me = obj dojox.json.ref.toJson(obj); // {"me":{"$ref":"#"}} 

Good, isn't it?

 dojox.json.ref.toJson(window) // Error: Can't serialize DOM nodes 

Well not good enough for me.

Why?

I'm trying to make DOM compatibility table for different browsers. For instance, Webkit supports placeholder attribute and Opera doesn't, IE 8 supports localStorage and IE 7 doesn't, and so on.

I don't want to make thousands of test-cases. I want to make generic way for test them all.

I want to serialize DOM node or even whole window to JSON.

For example:

 >> serialize(document) -> { "URL": "http://stackoverflow.com/posts/2303713", "body": { "aLink": "", "attributes": [ "getNamedItem": "function getNamedItem() { [native code] }", ... ], ... "ownerDocument": "#" // recursive link here }, ... } 

JSON.stringify()

JSON.stringify(window) // TypeError: Converting circular structure to JSON 

The problem is JSON does not support circular references by default.

var obj = {} obj.me = obj JSON.stringify(obj) // TypeError: Converting circular structure to JSON 

window and DOM nodes have many of them. window === window.window as will as document.body.ownerDocument === document.

Also, JSON.stringify does not serialize functions, so this is not what I'm looking for.

dojox.json.ref

 `dojox.json.ref.toJson()` can easily serialize object with circular references: var obj = {} obj.me = obj dojox.json.ref.toJson(obj); // {"me":{"$ref":"#"}} 

Good, isn't it?

 dojox.json.ref.toJson(window) // Error: Can't serialize DOM nodes 

Well not good enough for me.

Why?

I'm trying to make DOM compatibility table for different browsers. For instance, Webkit supports placeholder attribute and Opera doesn't, IE 8 supports localStorage and IE 7 doesn't, and so on.

I don't want to make thousands of test-cases. I want to make generic way for test them all.

Update, June 2013

I made a prototype NV/dom-dom-dom.com.

fix another heading
Source Link
NVI
  • 15.1k
  • 17
  • 69
  • 104

I want to serialize DOM node or even whole window to JSON.

For example:

 >> serialize(document) -> { "URL": "http://stackoverflow.com/posts/2303713", "body": { "aLink": "", "attributes": [ "getNamedItem": "function getNamedItem() { [native code] }", ... ], ... "ownerDocument": "#" // recursive link here }, ... }    JSON.stringify() ---------------- 

JSON.stringify()

JSON.stringify(window) // TypeError: Converting circular structure to JSON 

The problem is JSON does not support circular references by default.

var obj = {} obj.me = obj JSON.stringify(obj) // TypeError: Converting circular structure to JSON 

window and DOM nodes have many of them. window === window.window as will as document.body.ownerDocument === document.

Also, JSON.stringify does not serialize functions, so this is not what I'm looking for.

dojox.json.ref


dojox.json.ref

 `dojox.json.ref.toJson()` can easily serialize object with circular references: var obj = {} obj.me = obj dojox.json.ref.toJson(obj); // {"me":{"$ref":"#"}} 

Good, isn't it?

 dojox.json.ref.toJson(window) // Error: Can't serialize DOM nodes 

Well not good enough for me.

Why?

I'm trying to make DOM compatibility table for different browsers. For instance, Webkit supports placeholder attribute and Opera doesn't, IE 8 supports localStorage and IE 7 doesn't, and so on.

I don't want to make thousands of test-cases. I want to make generic way for test them all.

I want to serialize DOM node or even whole window to JSON.

For example:

 >> serialize(document) -> { "URL": "http://stackoverflow.com/posts/2303713", "body": { "aLink": "", "attributes": [ "getNamedItem": "function getNamedItem() { [native code] }", ... ], ... "ownerDocument": "#" // recursive link here }, ... }    JSON.stringify() ---------------- JSON.stringify(window) // TypeError: Converting circular structure to JSON 

The problem is JSON does not support circular references by default.

var obj = {} obj.me = obj JSON.stringify(obj) // TypeError: Converting circular structure to JSON 

window and DOM nodes have many of them. window === window.window as will as document.body.ownerDocument === document.

Also, JSON.stringify does not serialize functions, so this is not what I'm looking for.

dojox.json.ref


 `dojox.json.ref.toJson()` can easily serialize object with circular references: var obj = {} obj.me = obj dojox.json.ref.toJson(obj); // {"me":{"$ref":"#"}} 

Good, isn't it?

 dojox.json.ref.toJson(window) // Error: Can't serialize DOM nodes 

Well not good enough for me.

Why?

I'm trying to make DOM compatibility table for different browsers. For instance, Webkit supports placeholder attribute and Opera doesn't, IE 8 supports localStorage and IE 7 doesn't, and so on.

I don't want to make thousands of test-cases. I want to make generic way for test them all.

I want to serialize DOM node or even whole window to JSON.

For example:

 >> serialize(document) -> { "URL": "http://stackoverflow.com/posts/2303713", "body": { "aLink": "", "attributes": [ "getNamedItem": "function getNamedItem() { [native code] }", ... ], ... "ownerDocument": "#" // recursive link here }, ... } 

JSON.stringify()

JSON.stringify(window) // TypeError: Converting circular structure to JSON 

The problem is JSON does not support circular references by default.

var obj = {} obj.me = obj JSON.stringify(obj) // TypeError: Converting circular structure to JSON 

window and DOM nodes have many of them. window === window.window as will as document.body.ownerDocument === document.

Also, JSON.stringify does not serialize functions, so this is not what I'm looking for.

dojox.json.ref

 `dojox.json.ref.toJson()` can easily serialize object with circular references: var obj = {} obj.me = obj dojox.json.ref.toJson(obj); // {"me":{"$ref":"#"}} 

Good, isn't it?

 dojox.json.ref.toJson(window) // Error: Can't serialize DOM nodes 

Well not good enough for me.

Why?

I'm trying to make DOM compatibility table for different browsers. For instance, Webkit supports placeholder attribute and Opera doesn't, IE 8 supports localStorage and IE 7 doesn't, and so on.

I don't want to make thousands of test-cases. I want to make generic way for test them all.

added 128 characters in body; edited tags; added 3 characters in body
Source Link
Pekka
  • 451k
  • 150
  • 989
  • 1.1k
Loading
edited tags
Link
NVI
  • 15.1k
  • 17
  • 69
  • 104
Loading
added 6 characters in body
Source Link
NVI
  • 15.1k
  • 17
  • 69
  • 104
Loading
added 12 characters in body; added 23 characters in body; added 1 characters in body
Source Link
NVI
  • 15.1k
  • 17
  • 69
  • 104
Loading
added 343 characters in body; added 81 characters in body
Source Link
NVI
  • 15.1k
  • 17
  • 69
  • 104
Loading
added 305 characters in body
Source Link
NVI
  • 15.1k
  • 17
  • 69
  • 104
Loading
Source Link
NVI
  • 15.1k
  • 17
  • 69
  • 104
Loading