如何使用JavaScript获取span标签的属性值而非其文本内容

你的代码存在两处问题：

• 第一，document.querySelector(".count-total")选中的是外层class为count-total的div元素，而data-multiply属性定义在div内部的span元素上，你需要先正确选中目标span元素
• 第二，getElementByID是用于根据id值查找DOM元素的方法，无法用于读取元素属性，而且该方法仅document对象可调用，不存在于普通元素节点上，正确拼写为getElementById

方案1：使用getAttribute方法读取属性 #

// 先选中div下的span元素
const targetSpan = document.querySelector(".count-total span");
// 读取data-multiply属性值
const myValue = targetSpan.getAttribute("data-multiply");
console.log(myValue); // 输出 "10"

方案2：使用HTML5标准dataset API读取 #

所有data-开头的自定义属性，都可以通过元素的dataset对象直接访问，自动省略data-前缀：

const targetSpan = document.querySelector(".count-total span");
const myValue = targetSpan.dataset.multiply;
console.log(myValue); // 输出 "10"

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