area元素的data-*属性必须用getAttribute()读取，dataset在多数浏览器中返回undefined；因其是void element，dataset支持极不一致，且无法赋值更新，可靠写法只有getAttribute()和setAttribute()。
area元素上data-*属性必须用getAttribute()读取
直接访问area.dataset.xxx在多数浏览器中会返回undefined，哪怕HTML里明明确确写了data-id="123"。这是因为<area>是void element（空元素），其DOM实现对dataset的支持极不一致：Chrome和Firefox在某些版本中完全不触发驼峰映射，Edge旧版甚至不暴露dataset属性本身。你不能依赖它。
可靠做法只有一条：getAttribute('data-xxx')。它绕过所有解析代理，直取HTML字符串。
<area shape="rect" coords="0,0,100,100" href="#" data-product-id="P-456">const area = document.querySelector('area[data-product-id]');const id = area.getAttribute('data-product-id'); // → "P-456" ✅area.dataset.productId // → undefined ❌（别试）
带数字或大写的data名在area上根本不会被dataset识别
<area>的dataset行为比普通元素更保守。哪怕你写data-user-id这种标准命名，部分移动端WebView仍可能忽略；一旦含数字开头（如data-2024-active）、大写字母（data-API-Key）或下划线（data_user_type），dataset连映射入口都不会创建——不是返回undefined，而是压根不存在那个键。
而getAttribute()无此限制，只要HTML里写了，就一定能拿到原始值。
立即学习“前端免费学习笔记（深入）”；
area.getAttribute('data-2024-active') // → "true"area.getAttribute('data-API-Key') // → "abc123"area.getAttribute('data_user_type') // → "premium"area.dataset["2024Active"] // → undefined（即使方括号也救不了）
area的data属性不能靠dataset赋值更新
给area.dataset.foo = 'bar'看似成功，但刷新后或重新查询getAttribute('data-foo')会发现仍是null。因为dataset对<area>是只读映射，赋值不触发DOM写入。
真正生效的写法只有setAttribute()，且必须带data-前缀：
area.setAttribute('data-tracking-id', 't-789');area.setAttribute('data-is-hotspot', 'true');area.removeAttribute('data-tracking-id');area.dataset.isHotspot = 'false'; // 无效，DOM未变更
map + area + data组合常用于图像热点埋点，但要注意服务端渲染兼容性
典型场景是服务端生成<map>与多个<area>，每个带data-event、data-payload等元数据。JS监听click时读取并上报——这时getAttribute()是唯一可信赖路径。
特别注意：若服务端输出data-payload='{"x":1,"y":2}'，前端必须用JSON.parse(area.getAttribute('data-payload'))，且加try/catch。别用JSON.parse(area.dataset.payload)，一是可能拿不到，二是驼峰转换可能破坏原始键名（比如data-api-url→dataset.apiUrl，但服务端写的是api_url）。
最容易被忽略的是：area的coords属性值变化不会触发dataset自动刷新，但getAttribute()每次都是新鲜读取——所以动态更新热点区域时，data属性也必须同步用setAttribute()重写，不能只改dataset。
