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

IT技术 javascript json dom serialization circular-reference
2021-01-13 02:56:46

我想将 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。

4个回答

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 重新模板的项目。

您可能会遍历 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”的期望。

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

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

也许它会有所帮助。

该脚本已移至 SourceForge，以便快速搜索xmlobjectifier jquery. 然而，我发现它有点过时了。
2021-04-08 02:56:46

看来得自己写了。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( ... ) { ... }
}
...
我已经在console._source_of() github.com/NV/console.js/blob/gh-pages/console.js#L29-84 中做了这样的事情，但它不处理循环引用。看起来我需要从 dojox.json.ref 中获取算法并根据我的需要采用它。
2021-03-21 02:56:46
其它你可能感兴趣的问题
上一篇为什么使用带有 javascript:"protocol" 的链接是不好的做法？ 下一篇在Javascript中用大写替换正则表达式捕获组