DOMParser解析包含<tr>的HTML字符串时结果不符合预期

问题现象 #

以下为复现该异常的示例代码：

const parser = new DOMParser()
const doc = parser.parseFromString("<tr><td>hello</td></tr>", "text/html")

代码运行后实际生成的DOM结构为：

<html>
  <head></head>
  <body>hello</body>
</html>

和预期中<body>节点生成完整<tr>、<td>元素的结果存在明显偏差。

根本原因 #

这是HTML解析器严格遵循HTML语法规范执行的容错处理机制：

• 根据HTML标准的合法元素嵌套规则，<tr>（表格行）不允许直接作为<body>的子节点存在，它的合法直接父级仅包括<table>、<thead>、<tbody>、<tfoot>等表格结构元素。
• 当DOMParser以text/html模式解析内容时，遇到没有合法父容器包裹的游离<tr>标签，会触发错误修正逻辑：直接丢弃这类不符合嵌套规则的结构性标签，仅保留标签内部包裹的文本内容，最终造成结构丢失、只剩文本的结果。

正确处理方式 #

如果需要保留<tr>元素的完整结构，需要在解析前为被解析的HTML字符串补全符合规则的嵌套父级，示例代码如下：

const parser = new DOMParser()
// 补全合法的表格嵌套结构再传入解析
const doc = parser.parseFromString("<table><tbody><tr><td>hello</td></tr></tbody></table>", "text/html")

该方式下解析器会正常识别并保留所有表格相关的DOM节点。

该解析逻辑和浏览器直接渲染游离表格标签的表现完全一致：如果在HTML页面中直接书写无父级包裹的<tr><td>test</td></tr>代码，浏览器渲染后同样不会生成对应的tr、td结构元素，只会将文本内容直接展示在页面中。

内容的提问来源于stack exchange，提问作者fctorial