应优先使用 getAttribute() 和 setAttribute() 操作 HTML 特性，因其严格对应源码值；value、checked 等属性反映实时状态，与特性值不同；data-* 特性推荐用 dataset API；布尔特性设空字符串即生效，移除须用 removeAttribute()。
getAttribute 和 setAttribute 是最直接的 DOM 特性操作方式
读写 HTML 元素的原生特性（如 id、class、data-* 、disabled）应优先使用 getAttribute() 和 setAttribute()。它们严格对应 HTML 源码中写的值，不经过浏览器解析或转换。
-
getAttribute('value')返回元素标签里实际写的字符串，比如会返回"abc"，哪怕用户已手动修改输入框内容 -
setAttribute('hidden', '')等价于写hidden=""，布尔特性只需设空字符串即可生效 - 对不存在的特性调用
getAttribute()返回null，不是undefined，判断时注意用=== null - 自定义特性（如
data-id）必须用getAttribute('data-id')，不能用elem.data-id（语法错误）
element.xxx 属性访问只适用于部分标准属性，且行为不一致
像 elem.id、elem.className、elem.value 这类是 DOM 元素对象的 JavaScript 属性，和 HTML 特性不是一一映射关系。它们可能被浏览器动态更新，也可能有类型转换。
-
elem.value返回当前输入值（实时），而getAttribute('value')返回初始 HTML 值 —— 这是表单控件最常踩的坑 -
elem.href返回绝对 URL，getAttribute('href')返回相对原始值（如"./page.html"） -
elem.style只反映内联style特性，不能读取 CSS 文件或中的样式 -
elem.checked是布尔值，getAttribute('checked')返回字符串"checked"或null
dataset API 专用于 data-* 特性，更安全也更易用
读写 data- 开头的自定义特性，推荐用 elem.dataset，它自动处理驼峰转换，且不区分大小写。
const el = document.querySelector('div');
el.setAttribute('data-user-id', '123');
el.setAttribute('data-last-login', '2024-05-01');
console.log(el.dataset.userId); // "123"（自动转为小驼峰）
console.log(el.dataset.lastLogin); // "2024-05-01"
el.dataset.newFlag = 'true'; // 自动添加 data-new-flag="true"
- 键名中短横线（
-）会被转成驼峰，data-order-id→dataset.orderId - 设置
dataset.foo = null或undefined不会移除特性；要删除必须用removeAttribute('data-foo') - IE11+ 支持，无需 polyfill；但若需兼容更低版本，仍得回退到
getAttribute
removeAttribute 和 hasAttribute 处理存在性判断和清理
删特性不能靠赋值 null 或空字符串，必须显式调用 removeAttribute()；判断是否存在也别用 == null，用 hasAttribute() 更准确。
立即学习“Java免费学习笔记（深入）”；
-
elem.removeAttribute('disabled')真正移除该特性，使控件恢复可交互状态 -
elem.hasAttribute('data-loaded')返回布尔值，比getAttribute('data-loaded') !== null更清晰 - 对布尔特性（
disabled、readonly等），设为空字符串、"disabled"或true都有效，但移除必须用removeAttribute - 不要写
elem.disabled = false来“取消禁用”，这仅影响 JS 属性，不一定同步到特性层面（尤其 SSR 渲染后）
真实项目里最容易混淆的是 value / checked / selected 这类“状态属性”和对应特性的区别。改值用属性，读初始值或服务端渲染意图用 getAttribute —— 混用会导致表单重置异常或 SSR 与客户端不一致。
