怎么使用javascript操作属性_javascript如何读写元素特性

应优先使用 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', '2025-05-01');
console.log(el.dataset.userId);     // "123"（自动转为小驼峰）
console.log(el.dataset.lastLogin);  // "2025-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() 更准确。

• 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 与客户端不一致。