Javascript 即使存在循环引用，如何将DOM节点序列化为JSON？

我想将DOM节点甚至整个窗口序列化为JSON

例如：

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

JSON.stringify 问题是JSON默认情况下不支持循环引用

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

window和DOM节点有许多这样的节点。window==window.window作为document.body.ownerDocument==文档

另外，JSON.stringify不会序列化函数，所以这不是我要找的

很好，不是吗

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

对我来说还不够好

为什么？

---

我正在尝试为不同的浏览器创建DOM兼容性表。例如，Webkit支持占位符属性，Opera不支持，IE8支持本地存储，IE7不支持，等等

我不想做成千上万的测试用例。我想做一个通用的方法来测试它们

更新，2013年6月

---

我制作了一个原型。

您可以遍历DOM并生成它的纯JS对象表示，然后将其提供给DojoX序列化程序。但是，您必须首先决定如何计划将DOM元素、它们的属性和文本节点无歧义地映射到JS对象。例如，您将如何表示以下内容

<parent attr1="val1">
  Some text
  <child attr2="val2"><grandchild/></child>
</parent>

---

我认为DojoX不立即支持DOM序列化的原因可能正是：首先需要选择一个方案来将DOM映射到JS对象。是否有可以采用的标准方案？您的JS对象会仅仅模拟一个没有任何函数的DOM树吗？我认为您必须首先定义从序列化DOM到JSON的期望值。

看起来您必须自己编写它。JSON序列化数据也可能不是任务DOM兼容性表的理想选择。您可能需要自己迭代对象，检查属性的类型等等

var functions = [];
var strings = [];
for( var key in window ) {
    if( typeof window[key] == 'string' ) {
        strings[strings.length] = key;
    } else if( typeof window[key] == 'function' ) {
        functions[functions.length] = key;
    } else if( ... ) { ... }
}
...

当我尝试将XML字符串转换为JSON时，我发现它非常有用

XMLObjectifier.xmlToJSON(XMLObjectifier.textToXML(xmlString));

也许会有帮助。

尝试一下将XHTML DOM元素转换为JSON的语法。例如：

<ul>
    <li style="color:red">First Item</li>
    <li title="Some hover text." style="color:green">Second Item</li>
    <li><span class="code-example-third">Third</span> Item</li>
</ul>

---

我还没有用过它，但我想在一个项目中使用它，在这个项目中，我想使用mustache.js重新创建网页模板。

我正在尝试为不同的浏览器创建DOM兼容性表。您希望如何序列化DOM节点？您希望从DOM节点获得什么信息？Gumbo，我刚刚添加了一个示例。现在清楚了吗？FWIW，我仍然不明白序列化为JSON如何帮助您测试兼容性的通用方法。我需要区分不同浏览器的整个窗口对象。如果不将窗口序列化为JSON之类的东西，我不知道该怎么做。我已经在控制台中做了类似的事情。_source_of，但它不处理循环引用。看起来我需要从dojox.json.ref中获取算法并根据需要采用它。为了快速搜索xmlobjectifier jquery，脚本被移动到SourceForge a。然而，我发现它有点过时了。

var functions = [];
var strings = [];
for( var key in window ) {
    if( typeof window[key] == 'string' ) {
        strings[strings.length] = key;
    } else if( typeof window[key] == 'function' ) {
        functions[functions.length] = key;
    } else if( ... ) { ... }
}
...

XMLObjectifier.xmlToJSON(XMLObjectifier.textToXML(xmlString));

<ul>
    <li style="color:red">First Item</li>
    <li title="Some hover text." style="color:green">Second Item</li>
    <li><span class="code-example-third">Third</span> Item</li>
</ul>

["ul",
    ["li", {"style": "color:red"}, "First Item"],
    ["li", {"title": "Some hover text.", "style": "color:green"}, "Second Item"],
    ["li", ["span", {"class": "code-example-third"}, "Third"], " Item" ]
]