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>

即浏览器知道<br>没有结束标记,但由于它<bar>是浏览器的未知标记,它假定它需要一个结束标记.

我知道/>(solidus)语法在HTML5中被忽略而在HTML4中无效,但无论如何我想教某些<bar>不需要结束标记的浏览器,我可以省略它.那可能吗？

是的,我正在尝试(暂时)滥用自定义标签的HTML代码,我有具体的理由这样做.毕竟,浏览器应该忽略未知标签并将它们视为没有样式的内联标签,因此我不应该破坏任何内容,因为我可以确保标签名称不会在真正的HTML标准中使用.

Answer 1

您必须在HTMLElement.prototype 上使用Object.defineProperty来覆盖innerHTML setter和getter,使用您自己的innerHTML实现,将您想要的元素视为void.看这里如何的innerHTML和HTML解析器默认情况下实现的.

请注意,虽然Firefox在HTMLElement.prototype上定义东西时会继续使用继承,例如,它会过滤到HTMLDivElement.事情应该在Opera中正常工作.

换句话说,哪些元素无效取决于HTML解析器.解析器遵循此列表,innerHTML主要使用相同的规则.

换句话说,除非你想在JS中创建自己的innerHTML实现,否则你可能应该忘记这一点.

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

我在这里使用了一个过时的innerHTML getter(不是setter)代码,它使用了一个void元素列表.这可能会给你一些想法.但是,编写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不同.)