嵌套元素的data属性不能通过父元素.dataset直接读取，必须定位到具体嵌套元素后用getAttribute或dataset获取；querySelectorAll配合属性选择器可精准筛选，getAttribute更鲁棒，for...in遍历dataset不可靠。
嵌套元素的data属性不能靠父元素.dataset直接读取
dataset是元素自身的属性映射，不是递归结构。哪怕
，你对
调用
dataset也拿不到span里的data-role——它根本不在那个dataset对象里。
想拿到嵌套标签的数据，必须先定位到那个嵌套元素本身，再对其调用读取方法。
用querySelectorAll配合属性选择器精准抓取嵌套data值
这是最常用、也最可控的方式：不依赖ID或class，直接按data属性存在与否或具体值来筛选目标节点。
- 选所有带
data-target-id的子元素：element.querySelectorAll('[data-target-id]') - 选值为
"1024"的嵌套按钮：element.querySelectorAll('button[data-action="submit"][data-target-id="1024"]') - 遍历结果后，对每个匹配元素用
getAttribute('data-target-id')或dataset.targetId取值
注意：CSS选择器中的data-属性名要保持原始写法（含连字符），不能写成驼峰；浏览器会自动匹配HTML中实际声明的属性名。
立即学习“前端免费学习笔记（深入）”；
getAttribute比dataset更适合嵌套场景下的鲁棒读取
嵌套结构常来自服务端渲染或框架动态生成，属性名可能含数字、下划线或大小写混用（如data-item-2-status、data_USER_ID），这时dataset.item2Status或dataset.userId大概率返回undefined，而getAttribute('data-item-2-status')始终能拿到原始字符串。
- 遇到
data-config='{"a":1}'，必须用getAttribute+JSON.parse()，dataset.config只会给你一个字符串，且无法还原结构 - 判断属性是否存在，用
el.hasAttribute('data-disabled')，别依赖dataset.disabled !== undefined——后者在属性存在但为空时也会误判 - 值为
data-flag（无等号赋值）时，getAttribute返回空字符串""，这是明确信号；dataset.flag也返回""，但你没法区分它是空值还是属性根本不存在
批量提取嵌套data时别用for...in遍历dataset
DOMStringMap（即dataset）不是普通对象，for...in、Object.keys()甚至Object.entries()在多数浏览器里都不可靠，尤其面对嵌套元素集合时极易漏掉键或报错。
正确做法是：对每个嵌套元素单独处理，或统一用底层属性过滤：
Array.from(el.attributes)
.filter(attr => attr.name.startsWith('data-'))
.map(attr => ({ name: attr.name, value: attr.value }))
这段代码能稳定获取任意元素（包括嵌套的）上所有data-属性的原始名和值，不依赖命名规范，也不受浏览器版本限制。
真正容易被忽略的是：嵌套层级越深，属性名越可能偏离“纯小写+连字符”这个dataset的理想输入格式；一旦出现data-api-key、data_2024_id或data-Url，dataset就失效了——这时候getAttribute不是备选，是唯一解。
