logo标签列表

哪些DOM元素可以作为tr的子元素？

htmldom
16

我有一个问题，因为我想将一些 td 包含在 tr 中，所以我需要知道：

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

4个回答
16

W3C规定了这些内容。关于tr，您可以在这里找到。基本上，只有th和td元素可以是直接的tr内容。

如果您想要表格中的其他内容，它必须放在td或th元素内部。例如，td可以包含流元素，包括div。

8

HTML规范说明：

允许的内容

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

<tr>元素只能包含仅有的 <td> 和 <th> 元素。

2
<tr>元素可以同时包含两者。 - Alohci
2
@Blender - 好的，你实际上是在阅读参考资料而非规范。HTML5规范中写着“零个或多个td或th元素”。HTML4规范则写着<!ELEMENT TR - O (TH|TD)+ -- table row -->。但是你误读了参考资料；它写的是“零个或多个：一个td元素或者一个th元素”。请注意冒号的位置。它是（一个td元素或一个th元素）零次或多次。不管怎样，这是一个方便的测试方式，可以通过验证器进行检查。 - Alohci
2

这种情况与我之前在Can we use any other TAG inside <ul> along with <li>?中详细描述过的ul非常相似，因此我建议您先阅读那篇文章。

值得注意的是，ASCII空格不形成文本节点，而任何非空格字符都会形成非法文本节点，这些节点不能成为table的子节点。

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

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

0
如果问题是关于从符合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。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接