求助：document.getElementsByClassName(...).data is not a function报错问题

嘿，这个报错我太熟了，咱们一步步拆解问题，帮你快速搞定它！

核心报错原因 #

你这里犯了一个典型的「原生JS和jQuery混用」的错误：

• document.getElementsByClassName('shopcart') 是原生JavaScript的方法，它返回的是HTMLCollection——一个包含所有匹配类名元素的类数组集合，根本不是jQuery对象；
• 而.data()是jQuery专属的方法，只有jQuery包装过的对象才能调用它，原生DOM元素/集合压根没有这个方法，这就是报错的根源。

两种修复方案任你选 #

方案1：全程用jQuery（推荐，毕竟你已经引入了）

既然代码里已经用了$(document).ready()，说明页面加载了jQuery，直接换用jQuery的选择器就行，省心又省力：

$(document).ready(function(){ 
  setTimeout(function(){ 
    alert(1);
    // 用jQuery类选择器获取元素，返回jQuery对象，直接调用.data()
    var stopMusicExt = $('.shopcart').data(); 
    // 你之前写的alert(data)里的data没定义，应该用咱们声明的stopMusicExt
    alert(stopMusicExt); 
  }, 1000); // 别忘了给setTimeout加延迟时间，比如1000毫秒，还有补全闭合括号
});

简单说：$('.shopcart')会把匹配的元素包装成jQuery对象，自然就能用.data()来获取元素上的所有data属性了。

方案2：坚持用原生JavaScript

如果不想依赖jQuery，也可以用原生方法实现，只是要注意几个细节：

document.addEventListener('DOMContentLoaded', function(){ 
  setTimeout(function(){ 
    alert(1);
    // 先获取元素集合，注意这是个集合，不是单个元素
    var shopcartElements = document.getElementsByClassName('shopcart');
    // 先判断集合里有没有元素，避免报错
    if(shopcartElements.length > 0){
      // 取集合里的第一个元素，用dataset获取所有data属性
      var stopMusicExt = shopcartElements[0].dataset; 
      // 原生dataset是DOMStringMap类型，转成字符串才能正常alert出来
      alert(JSON.stringify(stopMusicExt)); 
    }
  }, 1000);
});

划重点：

1. getElementsByClassName返回的是集合，必须通过索引（比如[0]）拿到具体的DOM元素；
2. 原生DOM元素的dataset属性可以获取所有以data-开头的属性，比如data-name="xxx"可以通过element.dataset.name访问。

额外要补的小漏洞 #

你原来的代码还有几个语法/逻辑小问题，顺手一起改了：

• alert(1)后面缺了分号，虽然JS容错，但写规范点更好；
• setTimeout没写延迟时间，也没补全闭合括号，代码会直接报错；
• alert(data)里的data变量根本没定义，应该用你声明的stopMusicExt；
• 整个代码块的闭合括号不完整，要确保每个function(){}都有对应的}收尾。

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