最稳妥做法是执行 document.querySelectorAll('tbody').forEach(el => el.remove())；删后表格仍正常显示因浏览器会自动创建隐式 tbody，但 JS 查询路径和 CSS 选择器需相应调整。
用 JavaScript 批量移除所有 tbody 元素
直接删掉所有 tbody 标签是可行的，但得小心：浏览器会自动补全 tbody，即使你写的是没有它的表格，DOM 中它也大概率存在。所以「批量删除」本质是操作 DOM 节点，不是改 HTML 字符串。
最稳妥的做法是选中所有 tbody 并调用 remove()：
document.querySelectorAll('tbody').forEach(el => el.remove());
注意别用 innerHTML = '' 或 textContent = ''，那会清空内容但留着空 tbody 标签；也别用 parentNode.removeChild() 手动写，remove() 更简洁且兼容现代浏览器（IE 不支持，如需兼容请用 removeChild 配合循环）。
为什么删了 tbody 表格还能正常显示？
因为 HTML 规范允许省略 tbody，浏览器解析时会自动包裹 tr 到一个隐式 tbody 里。你手动删掉后，只要 table 下还有 tr，渲染不受影响——但 JS 查询 tr 时路径就变了：table > tr 不成立，得写 table > tbody > tr 或更宽松的 table tr。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 删前：
document.querySelector('table').children返回[tbody] - 删后：
document.querySelector('table').children可能返回[tr, tr, ...]（取决于是否触发重排和浏览器行为） - 后续脚本若依赖
tbody存在，就会报错Cannot read property 'querySelectorAll' of null
用正则批量替换 HTML 字符串里的 tbody？不推荐
如果是在构建流程里处理静态 HTML 文件（比如用 Node.js 脚本预处理模板），有人想用正则删掉 <tbody>...</tbody>。这很危险：
- 嵌套结构（如
tbody里再有table）会让正则失灵 - 自闭合写法（
<tbody></tbody>）或大小写混用（<tbody>）会漏匹配 <li>注释、属性值里含类似字符串（<code>data-html="<tbody>"）会被误伤 <p>真要处理源码，请用 HTML 解析器，比如 Node.js 里用 <code>cheerio：const $ = cheerio.load(html);<br>$('tbody').remove();<br>return $.html();删完
tbody后 CSS 和事件监听还有效吗？大部分情况下有效，但要注意选择器和事件委托的绑定路径：
- CSS 中写
tbody tr:hover会失效，得改成table tr:hover或去掉tbody - 用
document.addEventListener('click', e => { if (e.target.matches('tbody tr')) {...} })也会失效，应改用e.target.closest('tr')判断 - jQuery 的
$('tbody tr')查不到结果，得换成$('table tr')或先确保tbody存在
真正容易被忽略的，是那些没写在主逻辑里、散落在各处的「假设
tbody必然存在」的代码片段——它们不会立刻报错，但会在某个边缘场景下静默失效。 - CSS 中写
