你是不是在操作DOM属性时总踩坑？原生属性读不到、自定义属性不会用、class属性还得特殊记……其实DOM属性操作有清晰章法，传统属性稳基础，HTML5自定义属性更规范。

一、先搞懂：什么是DOM属性节点？

网页里的HTML标签（比如<img src="1.jpg" class="box">），在DOM里就是元素节点，而标签上的src、class、alt，甚至你自己加的abc、say，就是属性节点。

它的作用很简单：给元素做更细致的描述，就像给一张照片标注「来源」「样式类」「自定义备注」。

这里有个关键误区，90%的新手都会错：

• 元素自带属性
  ：HTML标签原生写的属性（src、class、id），和DOM元素强绑定。
• 对象扩展属性
  ：把DOM元素当JS对象，手动加的属性/方法（比如img.aaa=123），和标签上的属性完全无关，不会显示在HTML里。

二、传统DOM属性操作：3大核心（读、设、删）

日常开发中，操作元素自带属性就3件事：读值、设值、删值，方法超固定，记牢不踩坑。

1. 读取属性值：2种方式，按需用

方式1：直接点属性（简单原生属性）

原生HTML属性（src、href、id）可以直接用「元素.属性名」读取，但自定义属性读不到！

<img id="myImg" src="test.jpg" alt="测试图片" abc="自定义">
<script>
// 获取元素节点
let img = document.getElementById("myImg");

// 1. 直接读取原生属性：没问题
console.log(img.src); // 输出：test.jpg（完整路径）
console.log(img.alt); // 输出：测试图片

// 2. 直接读自定义属性：undefined（读不到！）
console.log(img.abc); // undefined
</script>

方式2：getAttribute()（通用，推荐）

不管是原生属性还是自定义属性，用元素.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是JS保留字，直接点要用className，用getAttribute()直接写class就行：

// 正确写法
console.log(img.className); // 读class属性
console.log(img.getAttribute("class")); // 也可以

2. 设置属性值：setAttribute() 一键搞定

想给元素加属性/改属性值，用元素.setAttribute("属性名", "属性值")：

• 属性已存在 → 覆盖旧值。
• 属性不存在 → 新建属性并添加。

<div id="box">我是盒子</div>
<script>
let box = document.getElementById("box");

// 1. 设置原生属性：修改id
  box.setAttribute("id", "newBox");

// 2. 设置自定义属性：新增data属性
  box.setAttribute("data-info", "我是自定义属性");

// 3. 覆盖原有属性：修改内容（用textContent更合适，这里演示属性）
  box.setAttribute("title", "鼠标悬停显示");
</script>

3. 删除属性值：removeAttribute() 秒删

不需要的属性，直接用元素.removeAttribute("属性名")删除，干净利落：

<div id="box" class="red" title="提示">我是盒子</div>
<script>
let box = document.getElementById("box");

// 删除class属性
  box.removeAttribute("class");
// 删除title属性
  box.removeAttribute("title");
</script>

执行后HTML变成：<div id="box">我是盒子</div>，属性彻底消失！

三、HTML5自定义属性：规范写法，Vue必用！

传统自定义属性（比如abc="123"）太随意，HTML5推出了标准自定义属性：必须带data-前缀，专门存「和渲染无关的附加信息」，比如数据标识、状态，Vue里经常用它传值！

核心：dataset属性，操作超简单

每个DOM元素都有dataset对象，专门管理data-开头的自定义属性：

• 设值：不用写data-，直接元素.dataset.属性名。
• 取值：直接元素.dataset.属性名。
• 注意：属性名自动转小写（data-myName → dataset.myname）。

案例：HTML5自定义属性读写

<!-- 标签上写data-自定义属性 -->
<div
id="user"
data-name="张三"
data-age="20"
data-MySex="男"  <!--大写会自动转小写-->
>
  用户信息
</div>

<script>
let user = document.getElementById("user");

// 1. 读取HTML5自定义属性
console.log(user.dataset.name); // 输出：张三
console.log(user.dataset.age);  // 输出：20
console.log(user.dataset.mysex); // 大写转小写：男

// 2. 新增HTML5自定义属性（自动加data-前缀）
  user.dataset.address = "北京";
// 此时标签自动加：data-address="北京"

// 3. 修改原有属性
  user.dataset.age = "21";
</script>

衔接Vue：data-属性怎么用？

Vue中经常用data-属性传参，比如点击按钮获取自定义数据，比传统属性更规范：

<!-- Vue模板 -->
<button
  @click="getInfo"
data-id="1001"
data-title="Vue实战"
>
  点击获取信息
</button>

<script>
exportdefault {
    methods: {
        getInfo(e) {
            // 通过dataset读取data-属性，简洁又规范
            console.log(e.target.dataset.id);    // 1001
            console.log(e.target.dataset.title); // Vue实战
        }
    }
}
</script>

四、一张表总结：属性操作核心区别

五、新手必避3个坑

1. class属性
   ：直接点用className，getAttribute用class。
2. 自定义属性
   ：传统直接点读不到，必须用getAttribute()。
3. HTML5属性名
   ：大写自动变小写，别写驼峰（比如data-my-name → dataset.myName）。

总结

DOM属性操作其实一点不难，核心就2套逻辑：

1. 传统属性
   ：用getAttribute/setAttribute/removeAttribute，通吃所有属性；
2. HTML5自定义属性
   ：用dataset，规范带data-前缀，Vue开发必用。

不用死记硬背，记住「原生属性直接点，自定义属性用方法，HTML5加data-」，以后操作DOM属性再也不踩坑，新手也能写出专业的属性操作代码！

阅读原文：原文链接