哪些 DOM 元素可以是 tr 的子元素？答案

【问题标题】：Which DOM elements can be child of tr?哪些 DOM 元素可以是 tr 的子元素？
【发布时间】：2012-09-20 00:37:34
【问题描述】：

我有问题，因为我想将一些 td 包围在 tr 内，所以我需要知道。

哪些 DOM 元素可以是 tr 的子元素？（我知道div 不能。）

【问题讨论】：

标签： html dom

【解决方案1】：

情况与ul 的情况非常相似，我在Can we use any other TAG inside <ul> along with <li>? 上已经详细描述过，所以我建议您先阅读。

值得注意的是，不太明显的一点是ASCII空白不形成文本节点，而任何非空白字符形成非法文本节点，不能是table的子节点。

那么，在当前标准https://html.spec.whatwg.org/multipage/tables.html#the-table-element中tr的“内容模型”中我们看到：

内容模型：零个或多个 td、th 和脚本支持元素。

【讨论】：

【解决方案2】：

W3C 指定这个东西。对于tr，您可以找到它here。基本上，只有th 和td 元素可以是tr 的direct 内容。

如果你想其他东西放在你的桌子上，它必须放在td或th元素中。例如td可以包含流元素，包括div。

【讨论】：

【解决方案3】：

The HTML spec 状态：

允许的内容

零个或多个：一个td 元素，或一个th 元素

<tr> 元素只能包含 <td>s 和 <th>s。

【讨论】：

<tr> 元素可以同时包含两者。
@Blender - 好吧，您实际上是在阅读参考资料，而不是规范。 HTML5 spec 表示“零个或多个 td 或 th 元素”。 HTML4 spec 表示 <!ELEMENT TR - O (TH|TD)+ -- table row -->。但是您误读了参考资料；它说“零个或多个：一个 td 元素或第一个元素”。注意冒号的位置。它是（一个 td 元素或一个 th 元素） sero 或更多次。但无论如何，在验证器中检查它是一个简单的测试。

【解决方案4】：

如果问题是关于由符合 HTML 规范的 HTML 文档构造的 DOM 树，那么答案是 td 和 th，如 paxdiablo 的回答中所述。

但是您可以在脚本中随意修改 DOM 树。例如：

<!doctype html>
<table border>
<tr><td>foo <td>bar
</table>
<script>
var p = document.createElement('div');
p.innerHTML = 'Hello world!';
document.getElementsByTagName('tr')[0].appendChild(p);
</script>

这将使div 元素成为tr 元素的子元素。您甚至可以创建一些 td 元素并使其成为 div 元素的子元素。

这是否有意义以及是否会混淆浏览器是另一个问题。并且浏览器不会正常解析 HTML 标记，例如tr 元素包含一个 div 元素作为子元素——解析器不准备处理这种情况。在 HTML 标记中不可能对 td 元素进行分组（以任何其他方式，而不是使它们成为 tr 的子元素）。但是在 DOM 中，您可以创建奇数树。

如果只是想以特殊方式处理一些td 元素，请给它们一个class。

【讨论】：