jQuery用段落错误解析原始HTML

Question

屏幕截图显示了firebug观察窗口。

为什么它解析几乎相同的HTML错误？我预计第二行中只有一个元素，而不是元素数组。

Answer 1

浏览器不错误。 <p><div></div></p> 无效HTML 。

浏览器分析两个代码不同的原因是<p>元素仅允许包含inline elements。

<p>和<div>都是block elements，但<p>不能包含不是短语内容的<div>。因此，当浏览器读取该代码时，他会找到元素<p>，然后找到意外的<div>。浏览器非常容忍标记错误，因此浏览器会关闭p标记并转到下一个div元素。然后是第三个元素，（错误的HTML因为它错过了开始标记）所以它被读作一个新元素。

在第一种情况下您有嵌套元素，因此浏览器会显示一个元素;
在第二种情况中，您在同一DOM树级别中有三个元素，因此浏览器应答的元素数组。

他们都渲染，但错误的渲染会产生意想不到的结果。浏览器如何读取错误的标记以及CSS将很难预测。

因此，浏览器会将代码读取/解析为：<p></p><div></div><p></p>，从而为您提供不同的结果。

值得一读：

W3 / HTML5 规范：
的 p – paragraph
div – generic flow container。

MOZILLA开发者网络：
MDN: p element（查看“允许的内容”）
MDN: block-level elements

Answer 2

在任何一种情况下，结果都是没有错误。

<p> HTML标记可能只包含措辞内容元素。但是，<div>不是表示内容（而是流程元素）。 （简化<p>可能包含内联元素，但<div>是一个块元素。）因此，第二个示例中的HTML代码无效（如非符合标准）。

结果是，浏览器HTML到DOM解析器 - 当然是由jQuery触发 - 处理HTML如下：

1. 识别正在打开的<p>块
2. 识别正在打开的<div>块
3. 请注意，在之前打开的<p>
中，div块无效
4. 关闭上一个<p>块
5. ...

所以等效的HTML代码 <p></p><div></div><p></p>，这是有效的HTML。所以解析器会为你纠正HTML。

因为我们现在有三个顶级元素而不是具有一个顶级元素的嵌套元素，所以你得到一个DOM元素的数组，而不是像你期望的那样的一个元素。

Webbrowsers对非标准符合HTML代码非常强大。您在此处注意到并指出的行为是许多示例中的一个，其中解析器从无效的HTML代码中理解为最佳效果。

参考文献：

• W3: HTML markup: p
• W3: HTML markup: div
• MDN p