HTML中的自定义自动关闭/不配对标签？ [英] Custom self-closing / unpaired tags in HTML?

问题描述

以下代码[ jsfiddle ] ...

  var div = document.createElement（div）; 
 div.innerHTML =< foo>这是一个< bar /> test。< br>另一个测试。< / foo>; 
 alert（div.innerHTML）; 
  

...显示此解析结构：

 < foo>这是一个< bar>测试。 <峰; br>另一个测试。< / bar>< / foo> 
  

即。浏览器知道< br> 没有结束标记，但是因为< bar> 是一个未知标记浏览器，它假定它需要一个结束标记。

我知道HTML5中忽略 /> （solidus）语法，HTML4中无效，但无论如何想以某种方式教导浏览器< bar> 不需要结束标记，我可以省略它。 这可能吗？

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

解决方案

你必须使用 Object.defineProperty 用你自己的innerHTML实现覆盖innerHTML setter和getter，它将你想要的元素视为无效。请参阅此处，了解默认情况下如何实现innerHTML和HTML解析器。

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

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

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

您可以使用实时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不同。）

The following code [jsfiddle]...

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

...shows this parsed structure:

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

i.e. the browser knows that <br> has no closing tag but since <bar> is an unknown tag to the browser, it assumes that it needs an closing tag.

I know that the /> (solidus) syntax is ignored in HTML5 and invalid in HTML4, but anyway would like to teach somehow the browser that <bar> does not need an ending tag and I can omit it. Is that possible?

Yes, I'm trying to (temporarily) misuse the HTML code for custom tags and I have my specific reasons to do that. After all, browsers should ignore unknown tags and treat them just like unstyled inline tags, so I should not break anything as long I can make sure the tag names won't ever be used in real HTML standards.

解决方案

You'd have to use Object.defineProperty on HTMLElement.prototype to override the innerHTML setter and getter with your own innerHTML implementation that treats the elements you want as void. Look here for how innerHTML and the HTML parser is implemented by default.

Note though that Firefox sucks at inheritance when it comes to defining stuff on HTMLElement.prototype where it filters down to HTMLDivElement for example. Things should work fine in Opera though.

In other words, what elements are void depends on the HTML parser. The parser follows this list and innerHTML uses the same rules mostly.

So, in other words, unless you want to create your own innerHTML implementation in JS, you probably should just forget about this.

You can use the live DOM viewer though to show others how certain markup is parsed. You'll then probably notice that same end tags will implicitly close the open element.

I have some outdated innerHTML getter (not setter though) code here that uses a void element list. That may give you some ideas. But, writing a setter implementation might be more difficult.

On the other hand, if you use createElement() and appendChild() etc. instead of innerHTML, you shouldn't have to worry about this and the native innerHTML getter will output the unknown elements with end tags.

Note though, you can treat the unknown element as xml and use XMLSerializer() and DOMParser() to do things:

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

It's not exactly what you want, but something you can play with. (Test that in Opera instead of Firefox to see the difference with xmlns attributes. Also note that Chrome doesn't do like Opera and Firefox.)

这篇关于HTML中的自定义自动关闭/不配对标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！