JavaScript操作DOM属性需区分HTML属性和DOM属性：用getAttribute()/setAttribute()处理HTML属性，直接点语法访问DOM属性更高效，dataset API便捷操作data属性。
JavaScript 获取和操作 DOM 元素的属性，核心在于区分两类属性：HTML 属性（attribute）和 DOM 属性（property），并选用合适的方法。
获取 HTML 属性值（如 class、id、data-* 等）
HTML 属性是写在标签上的原始字符串值，用 getAttribute() 读取最可靠：
-
element.getAttribute('class')返回实际写的 class 值（如"btn primary"） -
element.getAttribute('data-id')可安全读取自定义 data 属性 -
element.hasAttribute('disabled')判断是否存在某属性
设置或移除 HTML 属性
用 setAttribute() 和 removeAttribute() 直接修改 HTML 源码层面的属性：
-
element.setAttribute('title', '点击查看详情')添加或更新 title -
element.removeAttribute('hidden')移除 hidden 属性，让元素重新可见 - 对布尔属性如
disabled，设为空字符串或"disabled"都有效：el.setAttribute('disabled', '')
读写 DOM 属性（反映当前状态，更常用）
DOM 属性是元素对象的 JS 属性，实时反映当前状态，直接点语法访问更高效：
立即学习“Java免费学习笔记（深入）”；
-
element.id、element.className、element.textContent—— 读写简单值 -
element.style.color = 'red'修改行内样式（注意驼峰命名） -
element.checked、element.value、element.disabled—— 表单控件的状态用 property 更准确（比如 checkbox 的 checked 状态可能和 HTML attribute 不同步）
处理 data 属性的便捷方式
现代浏览器支持 dataset API，自动转换 data-user-id 为 userId：
-
element.dataset.userId→ 读取data-user-id="123" -
element.dataset.userId = '456'→ 自动写入data-user-id="456" - 删除用
delete element.dataset.userId
不复杂但容易忽略：attribute 和 property 在表单元素、样式、自定义属性上行为不同，优先用 property 操作状态，用 attribute 操作原始 HTML 标记。
