状态栏DOM元素必须用id或class显式标识，推荐id="status-bar"；不可依赖语义标签；需手动监听selectionchange更新光标位置与标签路径；注意z-index层级、滚动跟随及异步优化。
状态栏 DOM 元素必须用 id 或 class 显式标识
很多开发者直接往 <footer> 里塞文字，结果 JS 找不到节点——因为没给唯一标识。状态栏不是靠语义标签自动识别的，编辑器或自定义脚本依赖的是可定位的 DOM 节点。
实操建议：
- 固定用
id="status-bar"（最稳妥），避免多个同名元素干扰 - 若需多实例（如分屏编辑器），改用
class="status-bar"+ 父容器上下文限定，例如document.querySelector('.editor-1 .status-bar') - 别用
<footer>当状态栏主体：它语义是页脚，可能被 CSS 重置、被屏幕阅读器误读，且不保证在编辑区域底部“贴住”
document.execCommand() 无法更新状态栏，得用 innerText 或 textContent
新手常把工具栏按钮逻辑套用到状态栏上，误以为 execCommand 能触发状态变更。其实它只作用于 contenteditable 区域内的选区，对状态栏 DOM 完全无效。
正确做法是直接操作状态栏元素内容：
立即学习“前端免费学习笔记（深入）”；
- 用
element.innerText = '加载中...'（会解析 HTML 实体，适合纯文本） - 需要插入小图标或内联样式时，改用
element.innerHTML，但注意 XSS 风险，禁止拼接用户输入 - 避免频繁赋值：状态更新太密（如每 50ms）会导致重排，改用节流（
throttle）或 requestIdleCallback
状态栏需手动绑定光标位置与标签路径监听
VS Code、Brackets 等编辑器的状态栏能实时显示行号、列号、当前 HTML 标签路径（如 div > ul > li），但这不是浏览器默认行为，必须自己监听事件并计算。
关键步骤：
- 监听
selectionchange事件，而非input或keyup（后者不覆盖鼠标点击切换焦点场景） - 用
window.getSelection().anchorNode获取当前光标所在节点，再向上遍历父元素生成路径字符串 - 行/列计算依赖
getBoundingClientRect()和offsetTop/offsetLeft，注意 iframe 编辑器中需切到子文档上下文 - 不要在主线程做深度 DOM 遍历，复杂路径建议用
requestIdleCallback异步处理
自定义状态栏容易忽略滚动跟随与 z-index 冲突
状态栏设为 position: fixed; bottom: 0 后，常被编辑器侧边栏、弹出菜单、代码补全框盖住——这不是 CSS 写错了，而是 z-index 层级没对齐。
排查要点：
- 检查编辑器主容器是否设置了
transform、filter或will-change，这些会创建新层叠上下文，让子元素的z-index失效 - 状态栏的
z-index值必须高于所有浮动 UI 组件，常见编辑器中至少要设为9999（VS Code 默认是 10000） - 滚动时状态栏“抖动”？说明用了
position: absolute而非fixed，或父容器有overflow: hidden截断了定位参考
