表格中的单元格和子级之间的区别

Question

拿一个简单的表格，比如：

<table id="fu">
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

我得到顶部元素“fu”，然后通过两种方式之一到达 0,0 单元格。

fu.children[0].children[0].cells[0]

或

fu.children[0].children[0].children[0]

我了解 children 和 childNodes 之间的区别，但是单元格和 children 似乎是相同的。如果我在调试器中查看它们，我会看到：

 fu.children[0].children[0].
   ...
   cells: HTMLCollection(2) [th, th]
   childElementCount: 2
   childNodes: NodeList(5) [text, th, text, th, text]
   children: HTMLCollection(2) [th, th]
   ...

有什么区别，我应该使用 .cells 还是 .children 还是没关系？这似乎无关紧要，但我担心可能存在它们不同的情况会破坏我的代码。

谢谢

Answer 1

由于表格行唯一的子元素是单元格，因此在tr 元素上使用时两者之间没有实际区别。

children 属性适用于 DOM 中的所有元素，但来自 cells 的较新规范，因此在一些古老和过时的浏览器上不受支持。