应直接访问 input.value 获取用户输入后的实时值，因为 getattribute("value") 仅返回 html 初始值，无法反映动态修改后的内容。
getAttribute 读不到用户输入后的 value 怎么办
直接访问 input.value，别用 getAttribute('value')。后者只返回 HTML 源码里写的初始值，比如 <input value="hello">，哪怕用户已改成 "world"，getAttribute('value') 还是返回 "hello"。
常见错误现象：表单提交时拿不到最新输入内容，调试发现 getAttribute('value') 始终是旧值。
- 读取实时输入值 → 用
input.value - 读取初始默认值（如做重置逻辑）→ 才考虑
getAttribute('value') - 读取
checked、selected、disabled等布尔状态 → 直接访问checkbox.checked，不是getAttribute('checked')
设置 class 或 style 为什么覆盖了原有样式
setAttribute('class', 'a b') 会完全替换整个 class 属性字符串；setAttribute('style', 'color:red') 同样会清空之前所有内联样式，只保留这一条。
性能与语义影响：频繁调用 setAttribute('class', ...) 触发重排，且无法增量控制类名。
- 增删单个 class → 用
element.classList.add('active')或.remove('active') - 批量操作 class → 用
element.className = 'a b c'（简单覆盖）或classList.toggle()（条件切换） - 改单个样式属性 → 直接赋值
element.style.color = 'blue'，不碰style属性本身
data- 属性该用 getAttribute 还是 dataset
优先用 dataset。它自动处理连字符转驼峰，比如 data-user-id 对应 element.dataset.userId；而 getAttribute('data-user-id') 返回原始字符串，需手动解析。
兼容性注意：IE8 不支持 dataset，但当前主流环境（2026 年）已无需降级。
- 读取
data-count→element.dataset.count（返回字符串，不是数字） - 写入
data-status→element.dataset.status = 'done' - 要保留连字符或动态拼接 key → 才退回到
getAttribute/setAttribute
disabled、checked 这类布尔属性怎么设才生效
setAttribute('disabled', '') 和 setAttribute('disabled', 'disabled') 效果一样；但设成 'false' 或 ''（空字符串）不会移除禁用状态 —— 它们只是字符串值，浏览器只看属性是否存在。
容易踩的坑：以为 el.setAttribute('disabled', false) 能取消禁用，实际无效；或者用 el.disabled = false 却忘了 DOM 属性和 HTML 属性的区别。
- 启用/禁用 → 直接操作 DOM 属性：
el.disabled = true/false - 初始化或服务端渲染后统一配置 → 用
setAttribute('disabled', '')或removeAttribute('disabled') - 检查是否被禁用 → 用
el.hasAttribute('disabled')，不是getAttribute('disabled') === 'true'
真实场景里最易忽略的点：把「HTML 属性」和「DOM 属性」混为一谈，尤其在表单交互、动态类名、数据绑定逻辑中。一个元素可能同时有 value="init"（HTML 属性）和 input.value === "current"（DOM 属性），两者独立存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
