JQuery.parseHTML() 是否正确处理 <source> 元素名称？

Question

我正在尝试使用 JQuery 解析一个简单的 XML 片段，其中包含一个名为 <source> 的元素，使用 $(xml) 或 $.parseHTML(xml)。结果对象被错误地解析为空的<source /> 标记，源标记内容为文本节点兄弟。例如，将var xml 设置为此 XML 片段：

<root>
    <name>Some name</name>
    <source>Some source</source>
</root>

调用console.log($(xml)[0]) 会导致：

<root>
    <name>Some name</name>
    <source />
    "Some source"
</root>

注意空的</source> 标记和文本作为兄弟。

但是，当元素名称更改为sourced 时，它可以正常工作。或者，如果我使用 $.parseXML(xml)，则 DOM 包含正确的 <source>Some source</source> 内容。

这是JSBin as an example。

这是一个 JQuery 错误，还是我在这里做错了什么？

Answer 1

根据MDN， <source> 是一个空的 HTML 元素，例如 <img> 和 <input>。你不能用它来包围文本，也没有</source>标签（所以这个无效标签被忽略了）。它用于指定包含它的<picture>、<audio> 或<video> 元素的资源位置，如下例所示：

<video controls>
  <source src="foo.webm" type="video/webm">
  <source src="foo.ogg" type="video/ogg"> 
  <source src="foo.mov" type="video/quicktime">
  I'm sorry; your browser doesn't support HTML5 video.
</video>

$.parseHTML() 像浏览器一样解析它（实际上，它通常只是使用浏览器自己的 HTML 解析功能）。

由于您的数据是 XML，而不是 HTML，因此您应该改用 $.parseXML()。