1. 8.4 動的マークアップの挿入
      1. 8.4.1 入力ストリームを開く
      2. 8.4.2 入力ストリームを閉じる
      3. 8.4.3 document.write()
      4. 8.4.4 document.writeln()
    2. 8.5 DOM parsing and serialization APIs
      1. 8.5.1 The DOMParser interface
      2. 8.5.2 Unsafe HTML parsing methods
      3. 8.5.3 HTML serialization methods
      4. 8.5.4 The innerHTML property
      5. 8.5.5 The outerHTML property
      6. 8.5.6 The insertAdjacentHTML() method

8.4 動的マークアップの挿入

マークアップを文書に動的に挿入するためのAPIはパーサーと相互作用するため、その動作は、HTML文書(およびHTMLパーサー)かXML文書(およびXMLパーサー)かのどちらで使用されるかによって異なる。

8.4.1 入力ストリームを開く

document = document.open()

前のオブジェクトを再利用する場合を除き、あたかもそれが新しいDocumentオブジェクトであるかのように、Documentに正しい場所で置換され、その後返される。

結果として得られるDocumentはHTMLパーサーが関連付けられており、 document.write()を使用して解析するデータを与えることができる。

Documentがまだ解析されている場合、メソッドは効果がない。

DocumentXML文書である場合、"InvalidStateError" DOMExceptionを投げる。

パーサーがカスタム要素コンストラクターを現在実行している場合、"InvalidStateError" DOMExceptionを投げる。

window = document.open(url, name, features)

window.open()メソッドのように動作する。

8.4.2 入力ストリームを閉じる

document.close()

document.open()メソッドによって開かれた入力ストリームを閉じる。

DocumentXML文書である場合、"InvalidStateError" DOMExceptionを投げる。

パーサーがカスタム要素コンストラクターを現在実行している場合、"InvalidStateError" DOMExceptionを投げる。

8.4.3 document.write()

document.write(...text)

一般に、与えられた文字列をDocumentの入力ストリームに加える。

このメソッドは非常に特異な振る舞いを持つ。一部の場合において、このメソッドは、パーサーが実行されている間、HTMLパーサーの状態に影響を与えることができる。その結果、文書のソースに対応しないDOMをもたらす(たとえば、記述された文字列が、文字列"<plaintext>"または"<!--"である場合)。他の例では、あたかもdocument.open()が呼び出されていたかのように、呼び出しが最初に現在のページをクリアできる。さらに多くの例では、メソッドは単に無視されるか、または例外を投げる。ユーザーエージェントは、このメソッドを介して挿入されたscript要素の実行を回避することを明示的に許可される。さらに悪いことに、このメソッドの正確な動作は、場合によってはネットワーク遅延に依存する可能性があり、これはデバッグが非常に困難な障害につながる可能性がある。これらすべての理由から、このメソッドの使用は強く勧めない。

XML文書で呼び出されるとき、"InvalidStateError" DOMExceptionを投げる。

パーサーがカスタム要素コンストラクターを現在実行している場合、"InvalidStateError" DOMExceptionを投げる。

This method performs no sanitization to remove potentially-dangerous elements and attributes like script or event handler content attributes.

8.4.4 document.writeln()

document.writeln(...text)

改行文字の後に、与えられた文字列をDocumentの入力ストリームに加える。必要ならば、open()メソッドを暗黙のうちに最初に呼び出す。

XML文書で呼び出されるとき、"InvalidStateError" DOMExceptionを投げる。

パーサーがカスタム要素コンストラクターを現在実行している場合、"InvalidStateError" DOMExceptionを投げる。

This method performs no sanitization to remove potentially-dangerous elements and attributes like script or event handler content attributes.

8.5 DOM parsing and serialization APIs

DOMParser

Support in all current engines.

Firefox1+Safari1.3+Chrome1+
Opera8+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

8.5.1 The DOMParser interface

DOMParser インターフェイスは、HTMLまたはXMLのいずれかとして、文字列を解析することで新しいDocumentオブジェクトを作成することを可能にする。

parser = new DOMParser()

新しいDOMParserオブジェクトを構築する。

document = parser.parseFromString(string, type)

typeに応じて、HTMLまたはXMLパーサーのいずれかを使用して文字列を解析し、結果のDocumentを返す。typeは、"text/html"(HTMLパーサーを呼び出す)、または"text/xml"、"application/xml"、"application/xhtml+xml"、もしくは"image/svg+xml"(XMLパーサーを呼び出す)。

XMLパーサーの場合、文字列を解析できない場合、返されるDocumentは、結果のエラーを説明する要素が含まれる。

script 要素は解析中に評価されず、結果の文書のエンコーディングは常にUTF-8となることに注意する。The document's URL will be inherited from parser's relevant global object.

typeに上記以外の値を指定すると、TypeError例外が投げられる。

構築してからparseFromString()メソッドを呼び出す必要があるクラスとしてのDOMParserの設計は、不幸な歴史的成果物である。もし今日にこの機能を設計していたとしたら、それはスタンドアロン機能になっただろう。For parsing HTML, the modern alternative is Document.parseHTMLUnsafe().

This method performs no sanitization to remove potentially-dangerous elements and attributes like script or event handler content attributes.

8.5.2 Unsafe HTML parsing methods

element.setHTMLUnsafe(html)

Parses html using the HTML parser, and replaces the children of element with the result. element provides context for the HTML parser.

shadowRoot.setHTMLUnsafe(html)

Parses html using the HTML parser, and replaces the children of shadowRoot with the result. shadowRoot's host provides context for the HTML parser.

doc = Document.parseHTMLUnsafe(html)

Parses html using the HTML parser, and returns the resulting Document.

script 要素は解析中に評価されず、結果の文書のエンコーディングは常にUTF-8となることに注意する。The document's URL will be about:blank.

These methods perform no sanitization to remove potentially-dangerous elements and attributes like script or event handler content attributes.

8.5.3 HTML serialization methods

html = element.getHTML({ serializableShadowRoots, shadowRoots })

Returns the result of serializing element to HTML. Shadow roots within element are serialized according to the provided options:

If neither option is provided, then no shadow roots are serialized.

html = shadowRoot.getHTML({ serializableShadowRoots, shadowRoots })

Returns the result of serializing shadowRoot to HTML, using its shadow host as the context element. Shadow roots within shadowRoot are serialized according to the provided options, as above.

8.5.4 The innerHTML property

The innerHTML property has a number of outstanding issues in the DOM Parsing and Serialization issue tracker, documenting various problems with its specification.

element.innerHTML

Returns a fragment of HTML or XML that represents the element's contents.

In the case of an XML document, throws a "InvalidStateError" DOMException if the element cannot be serialized to XML.

element.innerHTML = value

Replaces the contents of the element with nodes parsed from the given string.

In the case of an XML document, throws a "SyntaxError" DOMException if the given string is not well-formed.

shadowRoot.innerHTML

Returns a fragment of HTML that represents the shadow roots's contents.

shadowRoot.innerHTML = value

Replaces the contents of the shadow root with nodes parsed from the given string.

These properties' setters perform no sanitization to remove potentially-dangerous elements and attributes like script or event handler content attributes.

8.5.5 The outerHTML property

The outerHTML property has a number of outstanding issues in the DOM Parsing and Serialization issue tracker, documenting various problems with its specification.

element.outerHTML

Returns a fragment of HTML or XML that represents the element and its contents.

In the case of an XML document, throws a "InvalidStateError" DOMException if the element cannot be serialized to XML.

element.outerHTML = value

Replaces the element with nodes parsed from the given string.

In the case of an XML document, throws a "SyntaxError" DOMException if the given string is not well-formed.

Throws a "NoModificationAllowedError" DOMException if the parent of the element is a Document.

This property's setter performs no sanitization to remove potentially-dangerous elements and attributes like script or event handler content attributes.

8.5.6 The insertAdjacentHTML() method

The insertAdjacentHTML() method has a number of outstanding issues in the DOM Parsing and Serialization issue tracker, documenting various problems with its specification.

element.insertAdjacentHTML(position, string)

Parses string as HTML or XML and inserts the resulting nodes into the tree in the position given by the position argument, as follows:

"beforebegin"
Before the element itself (i.e., after element's previous sibling)
"afterbegin"
Just inside the element, before its first child.
"beforeend"
Just inside the element, after its last child.
"afterend"
After the element itself (i.e., before element's next sibling)

Throws a "SyntaxError" DOMException if the arguments have invalid values (e.g., in the case of an XML document, if the given string is not well-formed).

Throws a "NoModificationAllowedError" DOMException if the given position isn't possible (e.g. inserting elements after the root element of a Document).

This method performs no sanitization to remove potentially-dangerous elements and attributes like script or event handler content attributes.