html - 为什么 DOM 不阻止将 附加到 元素中？

Question

这是一个更普遍的问题示例，涉及 HTML5 解析器和 DOM API 之间的关系。有些东西在 HTML 中是不允许的，但显然与 DOM API 无关 — 因此您可以通过 DOM 创建“不允许的”HTML 情况。

例如根据 HTML5 规范，the p element有一个只有“短语内容”的内容模型。现在 "content model"是“关于必须包含哪些内容作为元素的子元素和后代元素的规范描述。”和 "phrasing content"基本上是文本和“段落内”标记，如链接和跨度，而不是 div 元素。

确实，如果我制作一个 HTML 文档或导致 HTML 片段被这样解析，div 会被强制“取消嵌套”:

var containerEl = document.createElement('body');
containerEl.innerHTML = "<p><div></div></p>";
console.log(containerEl.innerHTML); // -> "<p></p><div></div><p></p>"

似乎在解析过程中，“原始”段落被分成两部分，中间有一个 div。

但是这段代码让我可以毫无问题地将 div 插入到 p 中:

 let pEl = document.createElement('p'),
     divEl = document.createElement('div');
 pEl.appendChild(divEl);
 console.log(pEl.outerHTML);     // -> "<p><div></div></p>"

现在 DOM Level 3 规范说 .appendChild method如果插入了错误的节点“类型”，可以引发 DOMException:

HIERARCHY_REQUEST_ERR: Raised if this node is of a type that does not allow children of the type of the newChild node

我怀疑在这种情况下“类型”可能更多地指代，例如您不能将 Element 节点附加为 Text 节点的子节点。

标准中是否有任何内容澄清此处的行为，承认差异？通过解析 HTML 时不允许的 JavaScript 创建 DOM 层次结构会产生什么后果？

Answer 1

Is there anything in the standard that clarifies the behavior here, acknowledging the discrepancy?

是的，html5 standard提到 DOM != HTML != XHTML

1.8 HTML vs XML syntax

The DOM, the HTML syntax, and the XML syntax cannot all represent the same content. For example, namespaces cannot be represented using the HTML syntax, but they are supported in the DOM and in the XML syntax. Similarly, documents that use the noscript feature can be represented using the HTML syntax, but cannot be represented with the DOM or in the XML syntax. Comments that contain the string "-->" can only be represented in the DOM, not in the HTML and XML syntaxes.

What are the consequences to making a DOM hierarchy via JavaScript that's not allowed when parsing HTML?

取决于你在做什么。它可能导致跨浏览器的行为不一致。它可能会导致令人惊讶的造型。或者它可能导致内容无法呈现。例如。插入 <p>进入 <select>不会让它渲染。

与 fragment parsing algorithms 相比，直接节点操作 API(例如 appendChild)将显示不同的行为(例如 insertAdjacentHTML 和 innerTHML )因为后者本质上是通过文档解析器和 perform adjustments 运行文本在基于 HTML-specific rules 创建 DOM 树时来自文本，而节点操作 API 更通用，并且不知道此类调整。