如果有循环引用,如何将DOM节点序列化为JSON？

Question

我想将DOM节点甚至整个序列化为windowJSON.

例如:

 >> 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

问题是JSON默认不支持循环引用.

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

window和DOM节点有很多.window === window.window将如此document.body.ownerDocument === document.

此外,JSON.stringify不序列化函数,所以这不是我想要的.

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":"#"}}

好,不是吗？

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

对我来说还不够好.

为什么？

我正在尝试为不同的浏览器制作DOM兼容性表.例如,Webkit支持占位符属性,Opera不支持,IE 8支持localStorage,IE 7不支持,依此类推.

我不想做成千上万的测试用例.我想制作通用的方法来测试它们.

更新,2013年6月

我做了一个原型NV/dom-dom-dom.com.

Answer 1

http://jsonml.org/用于将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>

变

["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" ]
]

尚未使用它,但考虑将其用于我想要使用任何网页并使用mustache.js重新模板化的项目.

Answer 2

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

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

像这样？

{
    tag: "parent",
    attributes: [
        {
            name: "attr1",
            value: "val1"
        }
    ],
    children: [
        "Some text",
        {
            tag: "child",
            attributes: [
                {
                    name: "attr2",
                    value: "val2"
                }
            ],
            children: [
                { tag: "grandchild" }
            ]
         }
     ]
 }

我认为DojoX不能立即支持DOM序列化的原因可能就是:首先需要选择一个将DOM映射到JS对象的方案.是否有可以采用的标准方案？您的JS对象是否只是模仿没有任何函数的DOM树？我认为你必须首先定义你的期望是"将DOM序列化为JSON".

Answer 3

我发现了这个，当我尝试将 XML 字符串转换为 JSON 时，它对我很有用。

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

也许它会有所帮助。