不能直接用表格元素生成Breadcrumb，因为其语义属于<nav>+<ol>/<ul>，而<table>用于二维数据；误用会导致读屏误读、SEO失效、样式与响应式问题。
为什么不能直接用表格元素生成Breadcrumb
Breadcrumb 导航本质是层级路径的线性表达，语义上属于 <nav> + <ol> 或 <ul>，而 <table> 是用于二维关系数据的语义容器。强行用表格实现（比如把每级路径塞进 <td>）会导致：屏幕阅读器误读为数据表、SEO 丢失层级结构、CSS 样式难以对齐分隔符（如 / 或 >）、响应式断点错乱。
实时数据驱动的 Breadcrumb 正确实现方式
核心是监听数据变化（比如路由切换、API 返回新页面信息），然后动态更新 DOM 节点。关键不在“表格”，而在“如何安全高效地重写导航链”：
- 用
document.getElementById('breadcrumb')或querySelector定位容器，避免反复创建/销毁整个<nav> - 每次更新前清空子节点：
el.innerHTML = ''或while(el.firstChild) el.removeChild(el.firstChild)（后者更稳妥，避免事件监听器残留） - 层级数据应为数组格式，例如：
['首页', '商品分类', '手机', 'iPhone 15']，而非嵌套对象——扁平结构便于 map 渲染和索引判断 - 最后一项不加分隔符，其余项后追加
<span class="separator">/</span>，不要用伪元素做分隔，否则屏幕阅读器可能跳过
示例片段：
function renderBreadcrumb(items) {
const container = document.getElementById('breadcrumb');
container.innerHTML = '';
items.forEach((text, i) => {
const li = document.createElement('li');
li.textContent = text;
if (i < items.length - 1) {
li.setAttribute('aria-current', 'false');
li.innerHTML += '<span class="separator">/</span>';
} else {
li.setAttribute('aria-current', 'page');
}
container.appendChild(li);
});
}从表格数据中提取路径信息时的常见陷阱
如果原始数据确实来自 HTML 表格（比如后台导出的目录树表格），需先解析再转换，不能直接绑定：
立即学习“前端免费学习笔记（深入）”；
- 表格可能含合并单元格（
rowspan/colspan），导致rows[i].cells[j]索引错位——应优先用querySelectorAll('tr')+cells属性遍历，而非硬算下标 - 表格中路径常以“全路径字符串”形式存在（如
"首页 > 商品 > 手机"），需用.split(/[\s>\/]+/)拆分，但要注意中文顿号、空格、全角符号干扰，建议先.replace(/[\u3000\uFF0F\u3001]/g, '/')统一分隔符 - 表格行数可能为空或含标题行，必须过滤掉
textContent.trim() === ''或cells.length === 0的行
CSS 与可访问性必须同步处理
视觉上像面包屑，不代表它就是面包屑。缺了这两点，等于白做：
- 给容器加
role="navigation"和aria-label="当前位置"，否则 VoiceOver/NVDA 不识别为导航 - 每级
<li>必须有aria-current属性，当前页设为page，其他设为false（不是location或空字符串） - 分隔符
<span class="separator">要加aria-hidden="true"，否则读屏会念出“斜杠”二字 - 不要用
display: table模拟面包屑布局——Flex 或 Grid 更可控，且不会触发表格相关的键盘导航逻辑
真实项目里，最常被跳过的其实是 aria-current 和 aria-hidden，一漏就让残障用户完全迷失在“一堆没上下文的文本”里。
