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 解析器)中使用而有所不同。

Document 对象有一个 抛出动态标记插入计数器,它与 为标记创建元素 算法一起使用,以防止 自定义元素构造函数 在解析器调用它们时能够使用 document.open()document.close()document.write()。最初,计数器必须设置为零。

8.4.1 打开输入流

document = document.open()

Document/open

在所有当前引擎中支持。

Firefox1+Safari11+Chrome64+
Opera51+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+

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

结果 Document 具有与之关联的 HTML 解析器,可以使用 document.write() 向它提供要解析的数据。

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

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

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

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

window.open() 方法的工作方式相同。

Document 对象有一个 活动解析器已被中止 布尔值,它用于防止脚本在文档的 活动解析器 被中止后直接或间接调用 document.open()document.write() 方法。它最初为 false。

给定 document文档打开步骤 如下

  1. 如果 document 是一个 XML 文档,则抛出 "InvalidStateError" DOMException 异常。

  2. 如果 document抛出动态标记插入计数器 大于 0,则抛出 "InvalidStateError" DOMException

  3. entryDocument入口全局对象关联的 Document

  4. 如果 document来源entryDocument来源 同源,则抛出 "SecurityError" DOMException

  5. 如果 document 具有 活动解析器,其 脚本嵌套级别 大于 0,则返回 document

    这基本上会导致在解析过程中发现的内联脚本中调用 document.open() 时忽略它,同时仍然允许它在从非解析器任务(例如计时器回调或事件处理程序)中调用时起作用。

  6. 类似地,如果 document卸载计数器 大于 0,则返回 document

    这基本上会导致在 Document 正在卸载时从 beforeunloadpagehideunload 事件处理程序中调用 document.open() 时忽略它。

  7. 如果 document活动解析器已被中止 为 true,则返回 document

    值得注意的是,如果在 导航 开始后调用 document.open(),则会导致忽略它,但仅在初始解析期间。有关更多背景信息,请参阅 问题 #4723

  8. 如果 document节点可导航 为非空,并且 document节点可导航正在进行的导航 是一个 导航 ID,则 停止加载 document节点可导航

  9. 对于 document 的每个 包含阴影的包含后代 node擦除所有事件监听器和处理程序,给定 node

  10. 如果 documentdocument相关全局对象关联的 Document,则 擦除所有事件监听器和处理程序,给定 document相关全局对象

  11. 替换所有document 中的 null。

  12. 如果 document完全活动,则

    1. newURLentryDocumentURL 的副本。

    2. 如果 entryDocument 不是 document,则将 newURL片段 设置为 null。

    3. 使用 documentnewURL 运行 URL 和历史记录更新步骤

  13. document初始 about:blank 设置为 false。

  14. 如果 documentiframe 加载正在进行 标志已设置,则设置 document静音 iframe 加载 标志。

  15. document 设置为 非怪癖模式

  16. 创建一个新的 HTML 解析器 并将其与 document 关联。这是一个 脚本创建的解析器(这意味着它可以通过 document.open()document.close() 方法关闭,并且分词器将在发出文件结尾标记之前等待对 document.close() 的显式调用)。编码 置信度无关紧要

  17. 插入点 设置为指向 输入流 结尾之前的点(此时将为空)。

  18. 更新 document 的当前文档就绪状态 为 "loading"。

    这会导致 readystatechange 事件触发,但该事件实际上对作者代码不可见,因为之前的步骤 擦除了所有事件监听器和处理程序,这些监听器和处理程序可以观察到它。

  19. 返回 document

打开文档的步骤不会影响 Document 是否 准备完成加载后任务完全加载

open(unused1, unused2) 方法必须返回使用 this 运行打开文档步骤的结果。

unused1unused2 参数被忽略,但保留在 IDL 中以允许使用一个或两个参数调用函数的代码继续工作。它们是由于 Web IDL 重载解析算法 规则,如果这些参数不存在,则此类调用将抛出 TypeError 异常。 whatwg/webidl 问题 #581 正在调查更改算法以允许删除它们。 [WEBIDL]

open(url, name, features) 方法必须运行以下步骤

  1. 如果 this 不是 完全激活的,则抛出 "InvalidAccessError" DOMException 异常。

  2. 返回使用 urlnamefeatures 运行打开窗口步骤的结果。

8.4.2 关闭输入流

document.close()

Document/close

在所有当前引擎中支持。

Firefox1+Safari11+Chrome64+
Opera51+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+

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

如果 DocumentXML 文档,则抛出 "InvalidStateError" DOMException

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

close() 方法必须运行以下步骤

  1. 如果 thisXML 文档,则抛出 "InvalidStateError" DOMException

  2. 如果 this抛出动态标记插入计数器 大于零,则抛出 "InvalidStateError" DOMException

  3. 如果没有与 this 关联的 脚本创建的解析器,则返回。

  4. 在解析器的 输入流 结尾插入 显式 "EOF" 字符

  5. 如果 this挂起的解析阻塞脚本 不为空,则返回。

  6. 运行词法分析器,处理生成的标记,并在词法分析器到达 显式 "EOF" 字符旋转事件循环 时停止。

8.4.3 document.write()

document.write(...text)

Document/write

在所有当前引擎中支持。

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

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

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

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

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

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

Document 对象有一个 忽略破坏性写入计数器,它与 script 元素的处理结合使用,以防止外部脚本能够使用 document.write() 通过隐式调用 document.open() 来清除文档。最初,计数器必须设置为零。

给定 Document 对象 document、列表 text、布尔值 lineFeed 和字符串 sink文档写入步骤 如下所示

  1. string 为空字符串。

  2. 如果 text 包含 字符串,则令 isTrusted 为 false;否则为 true。

  3. 对于 text 的每个 value

    1. 如果 valueTrustedHTML 对象,则将 value 的关联 数据 附加到 string

    2. 否则,将 value 附加到 string

  4. 如果 isTrusted 为 false,则将 string 设置为使用 TrustedHTMLthis相关全局对象stringsink 和 "script" 调用 获取受信任类型兼容字符串 算法的结果。

  5. 如果 lineFeed 为 true,则将 U+000A LINE FEED 附加到 string

  6. 如果 documentXML 文档,则抛出 "InvalidStateError" DOMException

  7. 如果 document抛出动态标记插入计数器 大于 0,则抛出 "InvalidStateError" DOMException

  8. 如果 document活动解析器已中止 为 true,则返回。

  9. 如果 插入点 未定义,则

    1. 如果 document卸载计数器 大于 0 或 document忽略破坏性写入计数器 大于 0,则返回。

    2. 使用 document 运行 打开文档步骤

  10. 输入流 中的 插入点 之前插入 string

  11. 如果 document挂起的解析阻塞脚本 为空,则让 HTML 解析器 处理 string,一次一个代码点,处理生成的标记,并在词法分析器到达插入点或树构建阶段中止词法分析器的处理时停止(如果词法分析器发出 script 结束标记标记,则会发生这种情况)。

    如果 document.write() 方法是从内联执行的脚本中调用的(即,由于解析器解析了一组 script 标记而执行),则这是 解析器的重新进入调用。如果 解析器暂停标志 被设置,词法分析器将立即中止,并且不会解析任何 HTML,符合词法分析器的 解析器暂停标志检查

The document.write(...text) 方法的步骤是使用 thistext、false 和 "Document write" 来运行 文档写入步骤

8.4.4 document.writeln()

document.writeln(...text)

Document/writeln

在所有当前引擎中支持。

Firefox1+Safari11+Chrome64+
Opera51+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+

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

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

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

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

The document.writeln(...text) 方法的步骤是使用 thistext、true 和 "Document writeln" 来运行 文档写入步骤

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+
partial interface Element {
  [CEReactions] undefined setHTMLUnsafe((TrustedHTML or DOMString) html);
  DOMString getHTML(optional GetHTMLOptions options = {});

  [CEReactions] attribute (TrustedHTML or [LegacyNullToEmptyString] DOMString) innerHTML;
  [CEReactions] attribute (TrustedHTML or [LegacyNullToEmptyString] DOMString) outerHTML;
  [CEReactions] undefined insertAdjacentHTML(DOMString position, (TrustedHTML or DOMString) string);
};

partial interface ShadowRoot {
  [CEReactions] undefined setHTMLUnsafe((TrustedHTML or DOMString) html);
  DOMString getHTML(optional GetHTMLOptions options = {});

  [CEReactions] attribute (TrustedHTML or [LegacyNullToEmptyString] DOMString) innerHTML;
};

dictionary GetHTMLOptions {
  boolean serializableShadowRoots = false;
  sequence<ShadowRoot> shadowRoots = [];
};

8.5.1 The DOMParser 接口

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

parser = new DOMParser()

DOMParser/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+

构造一个新的 DOMParser 对象。

document = parser.parseFromString(string, type)

DOMParser/parseFromString

在所有当前引擎中支持。

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

根据 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 异常。

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

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

[Exposed=Window]
interface DOMParser {
  constructor();

  [NewObject] Document parseFromString((TrustedHTML or DOMString) string, DOMParserSupportedType type);
};

enum DOMParserSupportedType {
  "text/html",
  "text/xml",
  "application/xml",
  "application/xhtml+xml",
  "image/svg+xml"
};

The new DOMParser() 构造函数的步骤是不做任何事。

The parseFromString(string, type) 方法的步骤是

  1. compliantString 为使用 获取受信任类型兼容字符串 算法,以及 TrustedHTMLthis相关全局对象string、"DOMParser parseFromString" 和 "script" 调用该算法的结果。

  2. document 为一个新的 Document,其 内容类型typeURLthis相关全局对象关联的 DocumentURL

    文档的 编码 将保留为其默认值,即 UTF-8。特别是,在解析 compliantString 时发现的任何 XML 声明或 meta 元素都不会产生任何影响。

  3. 根据 type 进行切换

    "text/html"
    1. 给定 documentcompliantString从字符串解析 HTML

    由于 document 没有 浏览上下文,因此 脚本被禁用

    否则
    1. 创建一个与 document 关联的 XML 解析器 parser,并 禁用 XML 脚本支持

    2. 使用 parser 解析 compliantString

    3. 如果上一步导致 XML 完整性或 XML 命名空间完整性错误,则

      1. 断言document 没有子节点。

      2. root 为给定 document、"parsererror" 和 "http://www.mozilla.org/newlayout/xml/parsererror.xml" 创建元素 的结果。

      3. 可以选择向 root 添加属性或子节点以描述解析错误的性质。

      4. 追加 rootdocument

  4. 返回 document

从字符串解析 HTML,给定一个 Document document 和一个 字符串 html

  1. document类型 设置为 "html"。

  2. 创建一个与 document 关联的 HTML 解析器 parser

  3. html 放入 parser输入流 中。编码 置信度无关紧要的

  4. 启动 parser 并让它运行,直到它消耗掉刚刚插入输入流的所有字符。

    这可能会改变文档的 模式

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事件处理程序内容属性

ElementsetHTMLUnsafe(html) 方法的步骤是

  1. compliantHTML 为使用 TrustedHTMLthis相关全局对象html、"Element setHTMLUnsafe" 和 "script" 调用 获取可信类型兼容字符串 算法的结果。

  2. targetthis模板内容(如果 this 是一个 template 元素),否则为 this

  3. 使用 targetthiscompliantHTML 不安全地设置 HTML

ShadowRootsetHTMLUnsafe(html) 方法步骤是

  1. compliantHTML 为使用 TrustedHTMLthis相关全局对象html、"ShadowRoot setHTMLUnsafe" 和 "script" 调用 获取可信类型兼容字符串 算法的结果。

  2. 使用 thisthis影子宿主compliantHTML 不安全地设置 HTML

为了 不安全地设置 HTML,给定一个 ElementDocumentFragment target、一个 Element contextElement 和一个 字符串 html

  1. newChildren 为给定 contextElementhtml 和 true 的 HTML 片段解析算法 的结果。

  2. fragment 为一个新的 DocumentFragment,其 节点文档contextElement节点文档

  3. 对于 newChildren 中的每个 node,将 node 追加fragment

  4. target 中使用 fragment 替换所有


静态 parseHTMLUnsafe(html) 方法步骤是

  1. compliantHTML 为使用 TrustedHTMLthis相关全局对象html、"Document parseHTMLUnsafe" 和 "script" 调用 获取可信类型兼容字符串 算法的结果。

  2. document 为一个新的 Document,其 内容类型 为 "text/html"。

    由于 document 没有 浏览上下文脚本被禁用

  3. document允许声明式影子根 设置为 true。

  4. 使用 documentcompliantHTML 从字符串解析 HTML

  5. 返回 document

8.5.3 HTML 序列化方法

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

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

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

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

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

ElementgetHTML(options) 方法步骤是返回使用 thisoptions["serializableShadowRoots"] 和 options["shadowRoots"] 的 HTML 片段序列化算法 的结果。

ShadowRootgetHTML(options) 方法步骤是返回使用 thisoptions["serializableShadowRoots"] 和 options["shadowRoots"] 的 HTML 片段序列化算法 的结果。

8.5.4 innerHTML 属性

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

element.innerHTML

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

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

element.innerHTML = value

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

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

shadowRoot.innerHTML

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

shadowRoot.innerHTML = value

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

这些属性的设置器不会执行任何清理操作来删除可能存在危险的元素和属性,例如 script事件处理程序内容属性

给定一个 ElementDocumentDocumentFragment node 和一个布尔值 require well-formed片段序列化算法步骤

  1. context documentnode节点文档

  2. 如果 context document 是一个 HTML 文档,则返回使用 node、false 和 « » 的 HTML 片段序列化算法 的结果。

  3. 返回给定 require well-formednodeXML 序列化

给定一个 Element context 和一个字符串 markup片段解析算法步骤

  1. algorithmHTML 片段解析算法

  2. 如果 context节点文档 是一个 XML 文档,则将 algorithm 设置为 XML 片段解析算法

  3. new children 为调用给定 markupalgorithm 的结果,其中 context 设置为 context

  4. fragment 为一个新的 DocumentFragment,其 节点文档context节点文档

  5. 追加 new children 中的每个 节点fragment (按 树状顺序)。

    这确保了新 节点节点文档 是正确的。

  6. 返回 fragment

元素innerHTML 获取器步骤是返回使用 this 和 true 运行 片段序列化算法步骤 的结果。

ShadowRootinnerHTML 获取器步骤是返回使用 this 和 true 运行 片段序列化算法步骤 的结果。

元素innerHTML 设置器步骤是

  1. compliantString 为使用 TrustedHTMLthis相关全局对象、给定值、"Element innerHTML" 和 "script" 调用 获取受信任类型兼容字符串 算法的结果。

  2. contextthis

  3. fragment 为使用 contextcompliantString 调用 片段解析算法步骤 的结果。

  4. 如果 context 是一个 模板 元素,则将 context 设置为 模板 元素的 模板内容 (一个 DocumentFragment)。

    模板 元素上设置 innerHTML 将替换其 模板内容 中的所有节点,而不是其 子节点

  5. context 内用 fragment 替换所有

ShadowRootinnerHTML 设置器步骤是

  1. compliantString 为使用 TrustedHTMLthis相关全局对象、给定值、"ShadowRoot innerHTML" 和 "script" 调用 获取受信任类型兼容字符串 算法的结果。

  2. contextthis宿主

  3. fragment 为使用 contextcompliantString 调用 片段解析算法步骤 的结果。

  4. this 内用 fragment 替换所有

8.5.5 outerHTML 属性

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

element.outerHTML

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

在 XML 文档的情况下,如果元素无法序列化为 XML,则会抛出一个 "InvalidStateError" DOMException

element.outerHTML = value

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

在 XML 文档的情况下,如果给定字符串格式不正确,则会抛出一个 "SyntaxError" DOMException

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

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

元素outerHTML 获取器步骤是

  1. element 为一个虚拟节点,其唯一的子节点是 this

  2. 返回使用 element 和 true 运行 片段序列化算法步骤 的结果。

元素outerHTML 设置器步骤是

  1. compliantString 为使用 TrustedHTMLthis相关全局对象、给定值、"Element outerHTML" 和 "script" 调用 获取受信任类型兼容字符串 算法的结果。

  2. parentthis父级

  3. 如果 parent 为空,则返回。即使运行了其余步骤,也无法获得对创建的节点的引用。

  4. 如果 parent 是一个 Document,则会抛出一个 "NoModificationAllowedError" DOMException

  5. 如果 parent 是一个 DocumentFragment,则将 parent 设置为使用 this节点文档bodyHTML 命名空间 创建元素 的结果。

  6. fragment 为使用 parentcompliantString 调用 片段解析算法步骤 的结果。

  7. this父级 内用 fragment 替换 this

8.5.6 insertAdjacentHTML() 方法

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

element.insertAdjacentHTML(position, string)

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

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

如果参数具有无效值(例如,在 XML 文档 的情况下,如果给定字符串格式不正确),则会抛出一个 "SyntaxError" DOMException

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

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

元素insertAdjacentHTML(position, string) 方法步骤是

  1. compliantString 为使用 TrustedHTMLthis相关全局对象string、"Element insertAdjacentHTML" 和 "script" 调用 获取受信任类型兼容字符串 算法的结果。

  2. context 为空。

  3. 使用此列表中的第一个匹配项

    如果 position 与字符串 "beforebegin" ASCII 不区分大小写 匹配
    如果 position 与字符串 "afterend" ASCII 不区分大小写 匹配
    1. context 设置为 this父级

    2. 如果 context 为空或 Document,则抛出 "NoModificationAllowedError" DOMException

    如果 position 与字符串 "afterbegin" ASCII 不区分大小写 匹配
    如果 position 与字符串 "beforeend" ASCII 不区分大小写 匹配
    context 设置为 this
    否则

    抛出 "SyntaxError" DOMException

  4. 如果 context 不是 Element,或者以下所有条件都为真

    context 设置为根据 this节点文档bodyHTML 命名空间 创建元素 的结果。

  5. fragment 为使用 contextcompliantString 调用 片段解析算法步骤 的结果。

  6. 使用此列表中的第一个匹配项
    如果 position 与字符串 "beforebegin" ASCII 不区分大小写 匹配

    插入 fragmentthis父级,在 this 之前。

    如果 position 与字符串 "afterend" ASCII 不区分大小写 匹配

    插入 fragmentthis 的第一个子节点之前。

    如果 position 与字符串 "afterbegin" ASCII 不区分大小写 匹配

    追加 fragmentthis

    如果 position 与字符串 "beforeend" ASCII 不区分大小写 匹配

    插入 fragmentthis父级,在 this下一个兄弟节点 之前。

与其他直接 Node 操作 API(以及 innerHTML)不同,insertAdjacentHTML() 不包括对 template 元素的任何特殊处理。在大多数情况下,您希望使用 templateEl.content.insertAdjacentHTML(),而不是直接操作 template 元素的子节点。

8.5.7 createContextualFragment() 方法

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

docFragment = range.createContextualFragment(string)

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

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

partial interface Range {
  [CEReactions, NewObject] DocumentFragment createContextualFragment((TrustedHTML or DOMString) string);
};

RangecreateContextualFragment(string) 方法步骤为

  1. compliantString 为使用 TrustedHTMLthis相关全局对象string"Range createContextualFragment" 调用 获取可信类型合规字符串 算法的结果。

  2. nodethis起始节点

  3. element 为 null。

  4. 如果 node 实现 Element,将 element 设置为 node

  5. 否则,如果 node 实现 TextComment,将 element 设置为 node父级元素

  6. 如果 element 为 null,或者以下所有条件都为真

    则将 element 设置为根据 this节点文档bodyHTML 命名空间 创建元素 的结果。

  7. fragment node 为使用 elementcompliantString 调用 片段解析算法步骤 的结果。

  8. 对于 fragment nodescript 元素的每个 后代 script

    1. script已开始 设置为 false。

    2. script解析器文档 设置为 null。

  9. 返回 fragment node