6. 属性与 dataset 自定义属性

属性就是标签上的附加信息，标准属性直接拿，自定义属性用 dataset。

核心三个：
① getAttribute / setAttribute——读写任意属性
② element.属性名——标准属性直接用
③ dataset.xxx——data-xxx 自定义属性

坑：data-user-id 在 JS 里是 dataset.userId、getAttribute 返回字符串、checked/disabled 是布尔属性。

6.1 互动演示（读这张商品卡片的小标签）

点按钮： 读卡片上的小标签， 下面同步代码与结论。

6.2 知识点逐条讲解

① 天生自带的：直接点一下

id、value、src 这些是标签生下来就有的，不用任何方法，点一下就读到了：

// 抓到那个输入框
let inp = document.getElementById('nameInp');

// 读：输入框现在写的字 → "初始值 张三"
console.log(inp.value);

// 写：直接把输入框改成"李四"
inp.value = '李四';

② 自己贴的：setAttribute 贴、getAttribute 读

不是天生的属性，就像给书包贴个便利贴：贴用 setAttribute，读用 getAttribute。

// 抓到商品卡片
let box = document.getElementById('goods');

// 贴一张便利贴：写上 data-tag="hot"
box.setAttribute('data-tag', 'hot');

// 读：把 data-id 的值拿出来
let id = box.getAttribute('data-id');

// 打出来看看 → "1001"
console.log(id);

③ dataset：data-* 的省事写法

HTML5 规定：凡是 data- 开头的便利贴，都能用 dataset 这把"万能钥匙"直接开。规则是：便利贴上的短横线，到 JS 里自动变成驼峰：

// 抓到商品卡片
let box = document.getElementById('goods');

// 读 data-id → "1001"
console.log(box.dataset.id);

// 读 data-goods-price
console.log(box.dataset.goodsPrice);

// 改：把 data-id 改成 2002
box.dataset.id = '2002';

// 新贴一张 data-stock
box.dataset.stock = '100';

如果你拿 dataset.goodsPrice 去做加减法，会发现结果不对。因为读出来的是字串 "99" 不是数字 99，字串相加是拼在一起；要算数得先用 Number() 转成数字。

实战里常把商品几号、列表第几行这种业务数字贴在标签上，点击时 e.target.dataset.id 一拿，就知道你点的是哪条——后面事件委托会天天用。

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：列表项存商品 id/序号，点击时取出；存业务标记。

② 常见坑：把 dataset 读出来的字串当数字直接加减，结果不对。

③ 怎么解决：读取后用 Number() 转换；短横线命名自动变驼峰，按驼峰取。

本页重点