使用 javascript 从跨度（不是文本）中获取值

Question

我正在尝试获取 span 属性的值，但到目前为止只成功获取了文本（在这种情况下我不需要）。

 // I want the value to return "10" myValue = document.querySelector(".count-total").getElementByID("data-multiply") console.log(myValue)

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>

Answer 1

使用querySelector定位span ，然后从数据集中获取multiply值。

 const span = document.querySelector('.count-total span'); console.log(span.dataset); const val = span.dataset.multiply; console.log(val);

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>

Answer 2

使用dataset属性： https : //developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

 const node = document.querySelector(".count-total span[data-multiply]") console.info(node.dataset.multiply)

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>

Answer 3

.getElementByID("data-multiply")在语法上既不正确，也不会获得数据属性

它拼写为getElementById但在元素具有 ID 时使用

您需要使用带有完整路径的 querySelector 并使用dataset 属性

 // I want the value to return "10" const myValue = document.querySelector(".count-total span").dataset.multiply; console.log(myValue)

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>

Answer 4

getElementById （注意末尾的小写d ）查找具有匹配id="xyz"值的元素。 你的元素都没有id 。

假设带有data-multiply的span是具有该data-*属性的唯一（或至少是第一个）元素，您可以使用属性选择器（ [data-multiply] ）通过querySelector找到它，并通过getAttribute或dataset读取其属性值：

 const element = document.querySelector("[data-multiply]"); const myValue = element.getAttribute("data-multiply"); console.log(myValue); const myValue2 = element.dataset.multiply; console.log(myValue2);

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>