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 解析和序列化 API
      1. 8.5.1 DOMParser 接口
      2. 8.5.2 不安全的 HTML 解析方法
      3. 8.5.3 HTML 序列化方法
      4. 8.5.4 innerHTML 属性
      5. 8.5.5 outerHTML 属性
      6. 8.5.6 insertAdjacentHTML() 方法
      7. 8.5.7 createContextualFragment() 方法

8.4 动态标记插入

用于将标记动态插入文档的 API 与解析器交互,因此它们的行为因其是否与 HTML 文档(以及 HTML 解析器)或 XML 文档(以及 XML 解析器)一起使用而异。

8.4.1 打开输入流

document = document.open()

导致 Document 被就地替换,就像它是一个新的 Document 对象一样,但重用以前的对象,然后返回该对象。

生成的 Document 与它相关联的 HTML 解析器,可以使用 document.write() 给它提供要解析的数据。

如果 Document 仍在被解析,则该方法没有效果。

如果 Document 是一个 XML 文档,则抛出 "InvalidStateError" DOMException

如果解析器当前正在执行 自定义元素构造函数,则抛出 "InvalidStateError" DOMException

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

就像 window.open() 方法一样。

8.4.2 关闭输入流

document.close()

关闭由 document.open() 方法打开的输入流。

如果 Document 是一个 XML 文档,则抛出 "InvalidStateError" DOMException

如果解析器当前正在执行 自定义元素构造函数,则抛出 "InvalidStateError" DOMException

8.4.3 document.write()

document.write(...text)

通常,将给定的字符串添加到 Document 的输入流中。

此方法的行为非常特殊。在某些情况下,此方法可以在解析器运行时影响 HTML 解析器 的状态,从而导致 DOM 不对应于文档的源代码(例如,如果写入的字符串是字符串 "<plaintext>" 或 "<!--")。在其他情况下,该调用可能会首先清除当前页面,就像调用了 document.open() 一样。在更多情况下,该方法被简单地忽略,或者抛出异常。用户代理 明确允许避免执行通过此方法插入的 script 元素。为了使问题更加复杂,此方法的确切行为在某些情况下可能取决于网络延迟,这会导致非常难以调试的故障。出于所有这些原因,强烈建议不要使用此方法。

当在 XML 文档 上调用时,抛出 "InvalidStateError" DOMException

如果解析器当前正在执行 自定义元素构造函数,则抛出 "InvalidStateError" DOMException

此方法不会执行任何清理操作以删除潜在的危险元素和属性,例如 script事件处理程序内容属性

8.4.4 document.writeln()

document.writeln(...text)

将给定的字符串添加到 Document 的输入流中,后跟一个换行符。如果有必要,会首先隐式调用 open() 方法。

当在 XML 文档 上调用时,抛出 "InvalidStateError" DOMException

如果解析器当前正在执行 自定义元素构造函数,则抛出 "InvalidStateError" DOMException

此方法不会执行任何清理操作以删除潜在的危险元素和属性,例如 script事件处理程序内容属性

8.5 DOM 解析和序列化 API

DOMParser

所有当前引擎均支持。

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 DOMParser 接口

DOMParser 接口允许作者通过解析字符串来创建新的 Document 对象,作为 HTML 或 XML。

parser = new DOMParser()

构造一个新的 DOMParser 对象。

document = parser.parseFromString(string, type)

根据 type 使用 HTML 或 XML 解析器解析 string,并返回生成的 Documenttype 可以是 "text/html"(这将调用 HTML 解析器),或任何 "text/xml","application/xml","application/xhtml+xml",或 "image/svg+xml"(这将调用 XML 解析器)。

对于 XML 解析器,如果无法解析 string,则返回的 Document 将包含描述生成错误的元素。

请注意,在解析过程中不会评估 script 元素,并且生成文档的 编码 将始终为 UTF-8。文档的 URL 将从 parser相关全局对象 继承。

对于 type 的其他值,将抛出 TypeError 异常。

DOMParser 的设计,作为需要构造然后调用其 parseFromString() 方法的类,是一个不幸的历史遗留问题。如果我们今天设计这个功能,它将是一个独立的函数。对于解析 HTML,现代的替代方案是 Document.parseHTMLUnsafe()

此方法不会执行任何清理操作以删除潜在的危险元素和属性,例如 script事件处理程序内容属性

8.5.2 不安全的 HTML 解析方法

element.setHTMLUnsafe(html)

使用 HTML 解析器解析 html,并用结果替换 element 的子节点。 element 为 HTML 解析器提供上下文。

shadowRoot.setHTMLUnsafe(html)

使用 HTML 解析器解析 html,并用结果替换 shadowRoot 的子节点。 shadowRoot宿主 为 HTML 解析器提供上下文。

doc = Document.parseHTMLUnsafe(html)

使用 HTML 解析器解析 html,并返回生成的 Document

请注意,在解析过程中不会评估 script 元素,并且生成文档的 编码 将始终为 UTF-8。文档的 URL 将为 about:blank

这些方法不会执行任何清理操作以删除潜在的危险元素和属性,例如 script事件处理程序内容属性

8.5.3 HTML 序列化方法

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

返回将 element 序列化为 HTML 的结果。 element 内部的 影子根 将根据提供的选项进行序列化。

如果未提供任何选项,则不会序列化任何影子根。

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

返回将 shadowRoot 序列化为 HTML 的结果,使用其 影子宿主 作为上下文元素。 shadowRoot 内部的 影子根 将根据提供的选项进行序列化,如上所述。

8.5.4 innerHTML 属性

DOM 解析和序列化 问题跟踪器 中,innerHTML 属性存在一些突出的问题,记录了其规范中的各种问题。

element.innerHTML

返回表示元素内容的 HTML 或 XML 片段。

对于 XML 文档,如果元素无法序列化为 XML,则会抛出 "InvalidStateError" DOMException

element.innerHTML = value

用从给定字符串解析的节点替换元素的内容。

对于 XML 文档,如果给定字符串格式不正确,则会抛出 "SyntaxError" DOMException

shadowRoot.innerHTML

返回表示影子根内容的 HTML 片段。

shadowRoot.innerHTML = value

用从给定字符串解析的节点替换影子根的内容。

这些属性的 setter 不会执行任何清理操作以移除潜在的危险元素和属性,例如 script事件处理程序内容属性

8.5.5 outerHTML 属性

DOM 解析和序列化 问题跟踪器 中,outerHTML 属性存在一些突出的问题,记录了其规范中的各种问题。

element.outerHTML

返回表示元素及其内容的 HTML 或 XML 片段。

对于 XML 文档,如果元素无法序列化为 XML,则会抛出 "InvalidStateError" DOMException

element.outerHTML = value

用从给定字符串解析的节点替换元素。

对于 XML 文档,如果给定字符串格式不正确,则会抛出 "SyntaxError" DOMException

如果元素的父元素是 Document,则会抛出 "NoModificationAllowedError" DOMException

此属性的 setter 不会执行任何清理操作以移除潜在的危险元素和属性,例如 script事件处理程序内容属性

8.5.6 insertAdjacentHTML() 方法

DOM 解析和序列化 问题跟踪器 中,insertAdjacentHTML() 方法存在一些突出的问题,记录了其规范中的各种问题。

element.insertAdjacentHTML(position, string)

string 解析为 HTML 或 XML,并将生成的节点插入到树中,位置由 position 参数给出,如下所示:

"beforebegin"
在元素本身之前(即在 element 的上一个兄弟节点之后)。
"afterbegin"
就在元素内部,在其第一个子节点之前。
"beforeend"
就在元素内部,在其最后一个子节点之后。
"afterend"
在元素本身之后(即在 element 的下一个兄弟节点之前)。

如果参数值无效(例如,对于 XML 文档,如果给定字符串格式不正确),则会抛出 "SyntaxError" DOMException

如果给定的位置不可用(例如,在 Document 的根元素之后插入元素),则会抛出 "NoModificationAllowedError" DOMException

此方法不会执行任何清理操作以移除潜在的危险元素和属性,例如 script事件处理程序内容属性

8.5.7 createContextualFragment() 方法

DOM 解析和序列化 问题跟踪器 中,createContextualFragment() 方法存在一些突出的问题,记录了其规范中的各种问题。

docFragment = range.createContextualFragment(string)

返回从标记字符串 string 创建的 DocumentFragment,使用 range起始节点 作为解析 fragment 的上下文。

此方法不会执行任何清理操作以移除潜在的危险元素和属性,例如 script事件处理程序内容属性