HTML 中的自定义自关闭/不配对标签？

Question

下面的代码 [jsfiddle]...

var div = document.createElement("div");
div.innerHTML = "<foo>This is a <bar /> test. <br> Another test.</foo>";
alert(div.innerHTML);

...显示了这个解析的结构：

<foo>This is a <bar> test. <br> Another test.</bar></foo>

即浏览器知道
没有结束标记，但由于 对浏览器来说是未知标记，因此它假定需要一个结束标记。

我知道 /> (solidus) 语法在 HTML5 中被忽略，在 HTML4 中无效，但无论如何我想以某种方式告诉浏览器 不会需要一个结束标签，我可以省略它。 这可能吗？

是的，我正在尝试（暂时）滥用自定义标记的 HTML 代码，并且我有这样做的具体原因。毕竟，浏览器应该忽略未知标签并将它们视为无样式的内联标签，因此只要我可以确保标签名称永远不会在真正的 HTML 标准中使用，我就不应该破坏任何内容。

Answer 1

您必须在 HTMLElement.prototype 上使用 Object.defineProperty使用您自己的innerHTML实现覆盖innerHTML setter和getter，该实现将您想要的元素视为无效。请查看此处了解innerHTML 和HTML 解析器的默认实现方式。

请注意，尽管 Firefox 在定义 HTMLElement.prototype 上的内容时在继承方面很糟糕，例如它会过滤到 HTMLDivElement。不过在 Opera 中一切应该都很好。

换句话说，哪些元素是 void 取决于 HTML 解析器。解析器遵循此列表和innerHTML大多使用相同的规则。

因此，换句话说，除非您想在 JS 中创建自己的 innerHTML 实现，否则您可能应该忘记这一点。

您可以使用实时 DOM 查看器向其他人展示某些标记如何被解析。然后您可能会注意到相同的结束标记将隐式关闭打开的元素。

我有一些过时的innerHTML getter（但不是setter）代码这里使用空元素列表。这可能会给你一些想法。但是，编写 setter 实现可能会更困难。

另一方面，如果您使用 createElement() 和appendChild() 等而不是innerHTML，则不必担心这一点，并且本机innerHTML getter 将输出带有结束标记的未知元素。

但请注意，您可以将未知元素视为 xml，并使用 XMLSerializer() 和 DOMParser() 来执行操作：

var x = document.createElement("test");
var serializer = new XMLSerializer();
alert(serializer.serializeToString(x));
var parser = new DOMParser();
var doc = parser.parseFromString("<test/>", "application/xml");
var div = document.createElement("div");
div.appendChild(document.importNode(doc.documentElement, true));
alert(serializer.serializeToString(div));

这并不完全是您想要的，但您可以使用它。 （在 Opera 而不是 Firefox 中进行测试，以查看 xmlns 属性的差异。另请注意，Chrome 的做法与 Opera 和 Firefox 不同。）