8

次のコード [ 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 標準で使用されないことを確認できる限り、何も壊すべきではありません。

4

1 に答える 1

7

HTMLElement.prototype でObject.definePropertyを使用して、必要な要素をvoidとして扱う独自の innerHTML 実装で innerHTML セッターとゲッターをオーバーライドする必要があります。innerHTML と HTML パーサーがデフォルトでどのように実装されているかについては、こちらを参照してください。

ただし、たとえば HTMLElement.prototype で HTMLDivElement にフィルターダウンするものを定義する場合、Firefox は継承が苦手であることに注意してください。ただし、Opera では問題なく動作するはずです。

つまり、どの要素が void であるかは、HTML パーサーに依存します。パーサーはこのリストに従い、innerHTML はほとんど同じ規則を使用します。

つまり、JS で独自の innerHTML 実装を作成したくない場合は、おそらくこれを忘れてください。

ただし、ライブ DOM ビューアを使用して、特定のマークアップがどのように解析されるかを他の人に示すことができます。おそらく、同じ終了タグが開いている要素を暗黙的に閉じることに気付くでしょう。

ここには、void 要素リストを使用する時代遅れの innerHTML ゲッター (セッターではありません) コードがあります。それはあなたにいくつかのアイデアを与えるかもしれません。ただし、setter の実装を作成するのはより難しい場合があります。

一方、innerHTML の代わりに createElement() や appendChild() などを使用する場合は、これを気にする必要はなく、ネイティブの innerHTML ゲッターが不明な要素を終了タグ付きで出力します。

ただし、不明な要素を 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));

それはまさにあなたが望むものではありませんが、あなたが遊ぶことができるものです. (Firefox の代わりに Opera でテストして、xmlns 属性の違いを確認してください。また、Chrome は Opera や Firefox のようには機能しないことに注意してください。)

于 2012-02-01T10:48:23.020 に答える