如何通过querySelector从HTML元素提取data-visitors数组数据

问题根源 #

你提到jQuery里赋值data-visitors的attr()代码被注释了，推测实际是用了jQuery的data()方法存储数据（比如$('#bubbleData').data('visitors', data)）。这种情况下，数据存在jQuery内部缓存里，不会修改DOM元素的data-visitors属性——而原生JS的dataset是直接读取DOM上的data-*属性值，所以你看到dataset.visitors为空，但控制台能看到的数据是jQuery缓存的内容，并非DOM属性本身。

两种解决方案 #

方案1：修改jQuery代码，直接写入DOM属性

恢复注释的代码，但要把数组转成JSON字符串（DOM属性只能存字符串，直接存数组会变成无效的[object Object]格式）：

// jQuery代码里修改赋值逻辑
$('#bubbleData').attr('data-visitors', JSON.stringify(data));

然后原生JS里读取并解析：

const bubble = document.querySelector('#bubbleData');
const visitorsData = JSON.parse(bubble.dataset.visitors);
// 现在visitorsData就是目标数组

方案2：不修改jQuery代码，直接读取jQuery缓存的数据

如果没法改jQuery代码，原生JS可以调用jQuery的data()方法读取缓存的数据（前提是页面已加载jQuery）：

const bubble = document.querySelector('#bubbleData');
const visitorsData = jQuery.data(bubble, 'visitors');
// 直接拿到目标数组，无需解析

额外说明 #

• 原生dataset仅对应DOM元素上实际存在的data-*属性，和jQuery的data()缓存是两套独立的存储机制。
• 控制台查看元素时，部分浏览器会显示jQuery附加的数据，但这不属于DOM属性的一部分，所以dataset读取不到。

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