div元素无语义，但合理使用id、class、data-*、title、lang/dir、contenteditable等全局属性可提升可维护性、可访问性与js控制力；需规避hidden/aria-hidden滥用及id命名错误。
div 元素本身无语义，但加上合适的全局属性，就能让它既可维护、又可访问、还能被 JS 精准控制。关键不是“能不能加”，而是“该加哪些、怎么加才不翻车”。
哪些全局属性真正在 div 上有用
不是所有全局属性都适合往 div 里塞。真正高频、有实际价值的就这几个：
-
id：仅当需要唯一锚点（如跳转、document.getElementById）时用，且必须全页唯一；别为了写 CSS 就硬加id，用class更合理 -
class：最常用，用于样式复用和 JS 批量操作，支持空格分隔多个值，比如class="card card--featured js-toggle" -
data-*：存业务数据最安全，比如data-user-id="12345"或data-status="pending"；JS 中用el.dataset.userId读取，注意驼峰转换规则 -
title：只对鼠标悬停有意义，别指望它提升 SEO 或无障碍体验；屏幕阅读器是否朗读取决于浏览器+辅助工具组合，不可依赖 -
lang和dir：多语言页面中必须配对使用，比如lang="zh-CN" dir="ltr"或lang="ar" dir="rtl"；单独设dir可能导致文本渲染错乱
contenteditable 在 div 上的危险与正确姿势
把 div 变成可编辑区域很常见，但直接写 contenteditable="true" 是个陷阱：
- 默认会获得焦点，键盘 Tab 流会把它卷进去，破坏可访问性流
- 没有
tabIndex控制时，用户可能无法用键盘进入或离开该区域 - 设为
false不等于“禁用”——它仍可聚焦、仍响应某些事件，只是不能输入
正确做法是同步控制两个属性：
const el = document.querySelector('#memo');
el.setAttribute('contenteditable', 'true');
el.tabIndex = 0; // 允许键盘聚焦
// 关闭时：
el.setAttribute('contenteditable', 'false');
el.tabIndex = -1; // 移出焦点流
别在 div 上滥用 hidden 和 aria-hidden
hidden 是 HTML 原生属性，设了就彻底从渲染树移除，JS 仍能查到、DOM 仍在，但不占布局、不可见、不可聚焦。但它不是“条件显示”的替代品：
- 用
hidden替代 CSS 的display: none或visibility: hidden，会导致样式调试困难——DevTools 里看不到计算后的 display 值 -
aria-hidden="true"和hidden同时存在时，前者会被忽略；如果只想隐藏语义但保留视觉，用aria-hidden+ CSS；如果彻底不想渲染，只用hidden - 动态切换
hidden时，注意它不会触发布局重排（reflow），但可能影响 ARIA live region 的播报时机
id 命名的硬约束和真实坑点
div 上的 id 看似简单，但一错就连锁失效：
- 必须以字母开头，后面只能跟字母、数字、
-、_、:、.；id="1nav"或id="user@id"都会让document.getElementById返回null -
id="submit"放在<form></form>内部，会覆盖表单原生的submit()方法，form.submit()调用直接报错 - 用
querySelector选id时，记得加#，比如document.querySelector('#header')；漏掉就是选标签名，白忙活 - 构建组件时，避免静态
id（如id="modal"），多个实例会冲突；改用动态生成，比如id={`modal-${Date.now()}`}或基于 props 拼接
最常被忽略的一点：id 的唯一性检查不在运行时，而是在 HTML 解析阶段。DevTools 里看不出重复，但 getElementById 总是返回第一个——这个行为没法 patch，只能靠开发流程卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
