javascript - 使用 document.registerElement 创建自定义非 HTML 节点

Question

我正在尝试序列化一些具有自定义属性(例如 id)的文本节点，这些属性需要保留在序列化形式中。

查看this page ，看起来最好的方法可能是使用包含自定义属性的特殊标记来包装每个 Text 元素。例如:

<P>some text</P>

可能序列化为:

<P><custom-text id='node27'>some text</custom-text></P>

当然，当我反序列化时，我可以遍历并获取“自定义文本”标签的所有实例，并手动将每个实例替换为具有自定义属性的文本节点。但我读到可以为标签创建一个自定义构造函数，这让我相信我可以在解析阶段自动完成此转换，这将消除完成后重新编写文档的需要。

但是，我对如何做到这一点有点模糊。我可以指定一个原型(prototype)作为 document.registerElement 的第二个参数，所以我想我只需设置原型(prototype)来创建一个 Text 节点，并使用 getter 和 setter 来处理自定义 id 属性:

var textId = document.registerElement('custom-text', {
    prototype: Object.create(Text.prototype, {
        id: {
            get: function() { return this.id; },
            set: function(value) { this.id = value }
        }
    })
});

但是当解析 custom-text 标记时，它不会创建文本节点，而是创建 HTML 节点。我使用的是 Chrome 33，并且 registerElement 存在于 document 对象中，这应该是我需要检查的全部内容。我会尝试创建一个包装 Object.create 调用的函数，以尝试发出警报或其他内容来查看它是否被击中，但我没有看到有关原型(prototype)值应该在哪里的文档。

Answer 1

您的自定义元素应基于 HTMLElement 原型(prototype)(或 HTMLSpanElement 原型(prototype)):

var textId = document.registerElement('custom-text', {
    prototype: Object.create(HTMLElement.prototype)
    })
})

无需添加 Id 属性，因为它已经存在。