如何在JSDOM中处理HTMLCollection、HTMLTableRowElement等DOM对象

你碰到的HTMLTableRowElement、HTMLTableSectionElement都是JSDOM模拟实现的标准W3C DOM对象，和浏览器环境下的DOM元素API完全兼容，控制台打印显示为空对象只是Node.js环境对DOM类实例的默认输出逻辑问题，对象本身自带所有原生DOM属性和方法，可以直接调用。

具体处理思路 #

• 避免打印误区：调试时不要直接打印DOM元素实例，改用打印元素.outerHTML、元素.textContent、元素.innerHTML即可查看实际内容，不会再出现空对象显示。
• 类数组统一转数组处理：getElementsByTagName、querySelectorAll等方法返回的都是类数组集合，遍历前先通过Array.from()或者展开运算符[...]转为普通JS数组，避免遍历异常。
• 直接使用原生DOM方法：所有浏览器支持的DOM操作都可以直接用，比如：
  • 查找子元素：element.querySelector()、element.querySelectorAll()
  • 获取/修改内容：element.innerHTML、element.textContent
  • 获取属性：element.getAttribute()、element.dataset
  • 表格专属API：HTMLTableRowElement.cells直接获取行内所有单元格，HTMLTableSectionElement.rows直接获取tbody下所有行

示例代码 #

// 处理只有1行的tbody
if (tbody.rows.length === 1) {
  const row = tbody.rows[0]
  // 拿第一格的内容
  const firstCellText = row.cells[0].textContent
  console.log('第一格内容：', firstCellText)
}

你更新2中的实现已经是符合JSDOM规范的正确处理方式，可以直接复用。

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