掌握DOM属性操作：从入门到实战的完整指南
你是否在操作dom属性时经常遇到问题？比如明明写了属性却读不到，自定义属性不知道该怎么用，class属性还得特殊记……其实DOM属性操作并不复杂，掌握了传统属性和html5自定义属性的用法，你就能轻松搞定。
一、先了解什么是DOM属性
我们来看看这段HTML代码：
<img src="1.jpg" class="box" alt="图片">在DOM（文档对象模型）中，img是一个元素节点，而src、class、alt就是它的属性节点。属性就是用来描述元素的，就像我们给照片添加的说明文字。
这里有个很重要的概念要搞清楚：
元素自带属性：指HTML标签里写的那些属性（比如src、class、id），这些属性和DOM元素是绑定的。
对象扩展属性：指我们把DOM元素当作一个JavaScript对象，手动给它添加的属性或方法。比如img.aaa = 123，这种属性和HTML标签没关系，不会在HTML代码里显示出来。
二、传统DOM属性的三种操作
1. 读取属性值
方式一：直接用点语法
对于原生的HTML属性（src、href、id这些），我们可以直接用元素.属性名的方式来读取。但要注意，自定义属性是读不到的！
<img id="myImg" src="test.jpg" alt="测试图片" abc="自定义">
<script>
let img = document.getElementById("myImg");
// 读取原生属性没问题
console.log(img.src); // 输出图片的完整路径
console.log(img.alt); // 输出：测试图片
// 读取自定义属性，结果为空
console.log(img.abc); // undefined
</script>方式二：用getAttribute()方法
这个方法就厉害了，不管是原生属性还是自定义属性，它都能读到。
<img id="myImg" src="test.jpg" abc="自定义">
<script>
let img = document.getElementById("myImg");
console.log(img.getAttribute("src")); // 输出：test.jpg
console.log(img.getAttribute("abc")); // 输出：自定义
</script>特别提醒：因为class是JavaScript的保留字，所以用点语法的时候要写成className：
img.className // 正确
img.getAttribute("class") // 这样也可以2. 设置属性值
用setAttribute()方法可以给元素添加或修改属性。如果属性已经存在，就覆盖原来的值；如果属性不存在，就新建一个。
<div id="box">我是盒子</div>
<script>
let box = document.getElementById("box");
// 修改id属性
box.setAttribute("id", "newBox");
// 添加自定义属性
box.setAttribute(">, "我是自定义属性");
// 添加title属性
box.setAttribute("title", "鼠标悬停时显示");
</script>3. 删除属性值
用removeAttribute()方法可以删除不需要的属性。
<div id="box" class="red" title="提示">我是盒子</div>
<script>
let box = document.getElementById("box");
box.removeAttribute("class"); // 删除class属性
box.removeAttribute("title"); // 删除title属性
</script>删除后，HTML代码就变成了<div id="box">我是盒子</div>。
三、HTML5自定义属性
以前我们写自定义属性很随意，比如abc="123"。HTML5推出了规范的自定义属性，要求必须以>dataset属性的用法
每个DOM元素都有一个dataset对象，专门用来管理>
设置属性：元素.dataset.属性名 = 值
读取属性：元素.dataset.属性名
注意：属性名会自动转成小写。比如>dataset.myname。
实际使用示例
<div id="user" >="张三" >="20" >="男">
用户信息
</div>
<script>
let user = document.getElementById("user");
// 读取HTML5自定义属性
console.log(user.dataset.name); // 输出：张三
console.log(user.dataset.age); // 输出：20
console.log(user.dataset.mysex); // 输出：男（大写转小写）
// 添加新的自定义属性
user.dataset.address = "北京";
// 这会在标签上自动添加
// 修改原有属性
user.dataset.age = "21";
</script>在vue中使用
Vue里经常用>
<template>
<button @click="getInfo" >="1001" >="Vue实战">
点击获取信息
</button>
</template>
<script>
export default {
methods: {
getInfo(e) {
console.log(e.target.dataset.id); // 输出：1001
console.log(e.target.dataset.title); // 输出：Vue实战
}
}
}
</script>四、属性操作对比表
| 操作类型 | 方法 | 适用场景 | 注意事项 |
|---|---|---|---|
| 读属性 | 元素.属性名 | 原生属性（src、id、href等） | 自定义属性读不到 |
| 读属性 | getAttribute() | 所有属性（原生+自定义） | 推荐使用，最可靠 |
| 设属性 | setAttribute() | 所有属性（原生+自定义） | 存在就覆盖，不存在就添加 |
| 删属性 | removeAttribute() | 所有属性 | 彻底删除属性 |
| HTML5属性 | dataset | >自动转小写，Vue常用 |
五、新手常犯的三个错误
class属性的读写：用点语法要写className，用getAttribute()要写class，别搞混了。
自定义属性的读取：直接点语法读不到自定义属性，必须用getAttribute()方法。
HTML5属性名的大小写：>dataset.myName，>dataset.myname（全小写）。
总结
DOM属性操作其实很简单，记住两点就行：
传统属性：用getAttribute()、setAttribute()、removeAttribute()这三个方法，能处理所有情况
HTML5自定义属性：用dataset对象，专门处理以>掌握了这些，以后操作DOM属性就不会踩坑了。无论是写原生JavaScript还是用Vue框架，都能轻松应对。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！