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 属性,实时反映当前状态,直接点语法访问更高效:
-
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 标记。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











