在Django模板中使用JS dataset读取自定义属性返回undefined的问题咨询

最常见的踩坑：HTML属性解析规则与dataset的命名匹配逻辑 #

你遇到的undefined大概率是自定义属性的大小写不匹配导致的，这是用dataset时非常容易忽略的隐形规则：

• HTML标准规定，标签上的属性名解析时不区分大小写，所有大写字母会被强制转为全小写。你写的<div id="currentUser1" data-currentUser="1">，实际渲染到DOM上的属性名是data-currentuser（原来的大写U已经被转成小写）
• dataset的键名生成规则是：把短横线连接的属性名，去掉短横线后将短横线后的第一个字母转大写，形成驼峰结构。你现在的属性被解析为全小写的data-currentuser，对应dataset的键名就是全小写的currentuser，而你JS里写的是.dataset.currentUser（带大写U），两个键名不匹配，自然返回undefined。
  这个过程完全不会触发JS报错，只会静默返回undefined，这也是你控制台没有其他异常提示的原因。

对应修正方案 #

把模板里的自定义属性改成短横线连接的全小写标准写法：

<!-- 原写法（不符合HTML属性命名规范） -->
<div id="currentUser1" data-currentUser="1"></div>

<!-- 修正为标准写法 -->
<div id="currentUser1" data-current-user="1"></div>

对应的JS取值代码可以保留，document.querySelector('#currentUser1').dataset.currentUser 会正常匹配到这个属性——因为dataset会把data-current-user转成驼峰结构的currentUser作为键名。

第二步排查：确认JS拿到的是预期的DOM元素 #

如果改了属性命名还是返回undefined，大概率是querySelector拿错了元素：

• 在浏览器控制台直接执行下面的命令，看输出的元素代码是不是你预期的目标：

document.querySelector('#currentUser1').outerHTML

如果输出的是空div、或者没有带自定义属性的代码，说明存在以下情况：

1. 页面里存在重复的同id元素，querySelector只会返回页面里第一个匹配id的元素，而不是你写的那个带自定义属性的div。可以执行document.querySelectorAll('#currentUser1').length 检查页面里同id元素的数量，返回值大于1的话，删掉重复id，或者改用类选择器定位目标元素。
2. 你写的这个div实际没有被Django模板渲染到最终页面——比如被条件判断{% if %}分支挡住了，或者被其他前端挂载逻辑替换掉了，需要核对模板实际渲染的DOM结构。

兜底兼容方案 #

如果不想改动原来的HTML属性写法，可以绕开dataset的匹配规则，直接用原生的getAttribute方法取值，注意匹配实际解析后的全小写属性名：

// 注意参数是浏览器解析后的全小写属性名
let currentuser2 = document.querySelector('#currentUser1').getAttribute('data-currentuser');

内容的提问来源于stack exchange，提问作者KevinCK