纯JavaScript获取<li>元素data-name属性时返回null问题求助

嘿，一眼就看到问题啦：你在JavaScript里尝试获取的是name属性，但你的HTML元素上实际定义的是**data-name自定义数据属性**，这就是控制台一直返回null的原因！

为啥会出现这个问题？ #

你的<li>标签根本没定义name属性，浏览器找不到这个属性，所以getAttribute('name')自然就返回null了。而你真正要拿的是HTML5标准的自定义数据属性data-name。

两种快速修复方案 #

方案1：修正getAttribute的属性名 #

直接把属性名改成data-name就行，最简单直接：

const meetTheTeamSectionNames = document.querySelectorAll('.team__names li');
Array.from(meetTheTeamSectionNames).forEach(name => {
  name.addEventListener('click', function(e) {
    const nameMe = e.target.getAttribute('data-name') // 这里改成data-name
    console.log(nameMe);
  });
});

方案2：用dataset API（更推荐） #

HTML5专门给自定义数据属性提供了更优雅的访问方式——dataset对象。你可以直接通过dataset.name来获取data-name的值（data-前缀会被自动去掉，属性名转为驼峰式，这里刚好data-name对应dataset.name）：

const meetTheTeamSectionNames = document.querySelectorAll('.team__names li');
Array.from(meetTheTeamSectionNames).forEach(name => {
  name.addEventListener('click', function(e) {
    const nameMe = e.target.dataset.name // 用dataset更简洁直观
    console.log(nameMe);
  });
});

额外小优化建议 #

如果你的<li>里面以后加了子元素（比如<span>或者<em>），点击子元素时e.target可能会指向子元素而不是<li>本身，导致拿不到data-name。这时候可以用this或者e.currentTarget来确保拿到的是绑定事件的那个<li>：

const meetTheTeamSectionNames = document.querySelectorAll('.team__names li');
Array.from(meetTheTeamSectionNames).forEach(name => {
  name.addEventListener('click', function() {
    const nameMe = this.dataset.name // this直接指向绑定事件的li元素
    console.log(nameMe);
  });
});

这样不管你点击<li>里的任何内容，都能稳稳拿到对应的data-name值～

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