在网页脚本开发中，控制页面内容的核心手段之一就是用JavaScript去读写DOM元素的各类属性。无论是修改图片地址、切换按钮状态，还是动态添加自定义数据，本质上都是在操作元素节点暴露出来的接口。理解这些接口的差异与适用场景，是写出可靠前端逻辑的基础。
property与attribute的本质区别
很多人在刚接触DOM时会把property和attribute混为一谈，实际上它们处于不同的层面。attribute指的是HTML文档中标签上书写的特性，例如<input type="text" value="hello">里的type和value；当浏览器解析这段HTML时，会生成一个对应的DOM对象，并把部分attribute映射成对象的property。也就是说，element.type这种写法访问的是property，而getAttribute('type')访问的是原始attribute。
两者并不总是同步。以input的value为例，用户在输入框打字会改变property中的value，但不会回头修改HTML里的attribute。因此如果你用getAttribute('value')去取用户输入后的内容，拿到的仍是初始的hello。下面的代码展示了这种差异：
<input id="demo" type="text" value="hello">
<script>
const el = document.getElementById('demo');
console.log(el.value); // hello
console.log(el.getAttribute('value')); // hello
el.value = 'world';
console.log(el.value); // world（property已变）
console.log(el.getAttribute('value')); // hello（attribute未变）
</script>
对于布尔型属性，例如disabled、checked，property是布尔值，attribute是字符串。设置el.disabled = true会让按钮不可用，而el.setAttribute('disabled', '')也能达到同样视觉效果，但读取时一个返回true一个返回空字符串。在需要判断状态的场景里，优先使用property可以避免类型转换带来的错误。
常用属性读写方法
除了直接点号赋值，标准API提供了getAttribute、setAttribute和removeAttribute来处理特性。当你要操作非标准或者动态生成的特性时，这几个方法更通用。比如给元素添加aria标签或者切换data属性，用setAttribute最为直观。
不过直接修改className虽然方便，但容易覆盖原有样式。现代浏览器提供了classList接口，支持add、remove、toggle和contains，不会破坏其他类名。下例演示了两种方式的对比：
<div id="box" class="base hidden"></div>
<script>
const box = document.getElementById('box');
// 旧方式：容易误删其他类
box.className = 'base show';
// 新方式：精准操作
box.classList.remove('hidden');
box.classList.add('show');
box.classList.toggle('active'); // 存在则删，不存在则加
</script>
removeAttribute不仅会删掉特性，也会重置对应的property为默认值。例如对input使用removeAttribute('value')后，输入框会清空并且property也回到空串，这和直接设value=''在部分旧浏览器中行为一致，但在表单重置逻辑里要小心使用，避免误清用户已填内容。
自定义data属性的正确读取
HTML5引入了data-前缀的自定义特性，专门用来在标签上挂业务数据。JavaScript可以通过getAttribute('data-user-id')读取，但更推荐用dataset属性，它会自动把连字符命名转成驼峰。这样代码可读性更高，也避免了手写字符串拼接出错。
注意dataset只能访问data-开头的特性，且数值类型取出后仍是字符串，需要自己转换。以下示例展示如何批量读取并运算：
<li id="item" data-user-id="1024" data-role="admin">张三</li>
<script>
const item = document.getElementById('item');
const id = Number(item.dataset.userId); // 1024
const role = item.dataset.role; // admin
if (id > 1000) {
item.textContent = role + '：' + item.textContent;
}
</script>
如果页面上有大量节点需要同步data状态，建议将数据层与视图层分离，只在必要时用dataset做桥接，否则频繁读写DOM属性会成为性能瓶颈。对于复杂应用，考虑用框架的响应式机制代替手工操作。
操作属性时的性能与坑点
每次读写layout相关属性（如offsetWidth配合className修改）都可能触发浏览器重排。若在一个循环里反复设置同一元素的多个特性，可以先在内存中拼好再一次性写入，或使用DocumentFragment减少回流次数。此外，用innerText还是textContent也有讲究：textContent不会触发重排且性能更好，innerText会考虑样式故更慢。
最后提醒，通过setAttribute设置的事件特性（如onclick字符串）虽然能工作，但会把代码写成字符串，难以维护且容易注入。应当用addEventListener绑定函数。下面是错误的旧写法与推荐写法：
<button id="btn">点我</button>
<script>
const btn = document.getElementById('btn');
// 不推荐
btn.setAttribute('onclick', 'alert("old")');
// 推荐
btn.addEventListener('click', function () {
alert('safe and clean');
});
</script>
综合来看，JavaScript操作DOM属性并不复杂，关键是根据场景选择property还是attribute，善用classList与dataset，避开重排和字符串事件的坑，就能写出清晰又高效的交互代码。
JavaScriptDOMelement_attribute修改时间：2026-08-03 00:21:27