如何使用JavaScript获取data属性数据？点击传参场景方法失效求助

场景：用户点击元素时，需将该元素data属性中的数据传入someFunction()函数。
代码示例：

<span id="someid" onClick={() => someFunction()} data-video-page="some data" class="dot" />

尝试使用getAttributes()、querySelector()方法获取data属性中的数据，但均未生效，返回值为空。

解决方案 #

方法1：通过点击事件对象直接获取（最推荐） #

在onClick的回调里接收事件参数e，通过e.target或e.currentTarget拿到当前点击的元素，再用两种方式获取data属性值：

方式A：使用dataset属性（更简洁）

dataset会自动将data-前缀的属性转为驼峰命名，比如data-video-page对应dataset.videoPage：

<span id="someid" onClick={(e) => someFunction(e.target.dataset.videoPage)} data-video-page="some data" class="dot" />

方式B：使用getAttribute()方法（注意拼写，没有复数s）

直接传入完整的属性名即可：

<span id="someid" onClick={(e) => someFunction(e.target.getAttribute('data-video-page'))} data-video-page="some data" class="dot" />

方法2：通过元素ID获取（适合固定ID的场景） #

如果元素ID固定不变，也可以在点击事件内直接获取元素再取值：

<span id="someid" onClick={() => {
  const elem = document.getElementById('someid');
  someFunction(elem.dataset.videoPage);
}} data-video-page="some data" class="dot" />

你之前失败的原因 #

• getAttributes()是拼写错误，正确的方法是getAttribute()（单数形式）
• 用querySelector()时如果在页面未加载完成就调用，会返回null；或者选择器写法错误（比如没加#选ID），放在点击事件内部调用就能避免这个问题，因为点击时元素肯定已经渲染完成。

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