为什么$（'<p> </p> <div> </div> <p> </p>'）返回多个节点的数组？

Question

我对$.parseHTML()函数感到困惑。我认为如果源html具有单个根节点，则此函数应返回具有单个DOM节点（根节点）的数组，其中所有内容作为子节点附加。 它大部分时间都是这样的，例如：

var nodes = $.parseHTML('<div><div>foo</div></div>');
console.debug(nodes.length); // prints 1

但是，如果根节点为<p>，则DOM节点的结构将丢失，并且HTML将分解为多个断开连接的节点：

var nodes = $.parseHTML('<p><div>foo</div></p>');
console.debug(nodes.length); // prints 3

我已经创建了jsfiddle，您可以尝试这些案例。

如果我使用$(html)或$.parseHTML(html)，则没有任何区别。

<p>有什么特别之处？为什么以不同的方式解析？ 这是一个错误还是一个功能？

Answer 1

那是因为解析HTML代码时，它不会以单个根节点结束。

段落中不能包含块元素，因此段落在div元素开始的位置结束。然后段落的结束标记成为第二个段落节点。

您最终得到的元素是：

<p></p>
<div>foo></div>
<p></p>

Answer 2

W3 specs明确指出：

  

P元素代表一个段落。它不能包含block-level elements（包括P本身）。

要查看效果，请尝试在<p><div>foo</div></p>上执行检查元素，您将看到代码片段已被解析为

<p></p>
<div>foo></div>
<p></p>

Answer 3

如果我理解正确，那是因为段落标签内部不能有div。您可以在此答案中了解更多相关信息 - https://stackoverflow.com/a/10763952/1234502