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

Posted 2023-03-05

【中文标题】表格中的单元格和子级之间的区别

【英文标题】：difference between cells and children in a table

【发布时间】：2021-01-27 20:37:39

【问题描述】：

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

<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 还是没关系？这似乎无关紧要，但我担心可能存在它们不同的情况会破坏我的代码。

谢谢

【问题讨论】：

请使用document.querySelectorAll和document.querySelector。

【参考方案1】：

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

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