Question

这是一个关于HTML5解析器和DOM API之间关系的更一般问题的示例。 HTML中允许的某些内容显然与DOM API无关 - 因此您可以创建＆＃34;不允许＆＃34; HTML情况通过 DOM。

E.g。根据HTML5规范，the p element的内容模型仅为＆＃34;措辞内容＆＃34;。现在"content model"是＆＃34;关于必须包含哪些内容作为元素的子元素和后代的规范性描述。＆＃34;并且"phrasing content"基本上是文本和＆＃34;段内＆＃34;标记，如链接和跨度，不是div元素。

事实上，如果我制作一个HTML文档或导致HTML片段被解析为这样，那么div就会被强行解读＆＃34; unnested＆＃34;：

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

在解析期间，＆＃34;原始＆＃34;段落分为两部分，其间为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规范表明如果错误的＆＃34;类型＆＃34; .appendChild method可以引发DOMException。插入节点：

HIERARCHY_REQUEST_ERR：如果此节点的类型不允许具有newChild节点类型的子节点，则引发

我怀疑在这种情况下＆＃34;键入＆＃34;可能更多地指的是，例如您不能将Element节点附加为Text节点的子节点。

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

Answer 1

标准中是否有任何内容澄清了此处的行为，承认存在差异？

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

1.8 HTML与XML语法

DOM，HTML语法和XML语法都不能代表   相同的内容。例如，无法使用。表示名称空间   HTML语法，但它们在DOM和XML语法中受支持。   同样，可以表示使用noscript功能的文档   使用HTML语法，但不能用DOM表示或在   XML语法。包含字符串“ - ＆gt;”的评论只能是   在DOM中表示，而不是在HTML和XML语法中。

在解析HTML时，通过JavaScript创建DOM层次结构有什么后果？

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

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

为什么DOM没有阻止将<div>附加到<p>元素中？

1 个答案:

1.8 HTML与XML语法