javascript - 检索跨度值

Question

我无法找到如何从下面给出的 html 中获取 span(80.40) 的值。

<div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
  <del></del>
  <span>$80.40</span>
</div>

这是我公司的网站代码，我无权编辑任何内容。我必须使用谷歌标签管理器合并一个新功能，为此我需要 span 元素中的值。我尝试了下面提到的一些选项。

$(".col-xs-4 service-fee-total totals cart-total text-right cart-highlight span").text()

document.getElementsByClassName("col-xs-4 service-fee-total totals cart-total text-right cart-highlight");

Answer 1

您可以使用document.querySelector按顺序to locate the span和 innerHTML获取这样的值:

console.log(document.querySelector('span').innerHTML);

<div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
  <del></del> <span>$80.40</span>
</div>

注意，前面的代码只是一个替代方案，您可能希望使用比 'span' 更具体的查询选择器，以便根据您的用例和 innerText或textContent而不是 innerHTML。例如(感谢 Tschallacka):

document.querySelector('[data-total-name="service-fee-total"] > span').innerText

console.log(document.querySelector('[data-total-name="service-fee-total"] > span').innerText);

<div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
  <del></del> <span>$80.40</span>
</div>

jQuery 版本

同样，在这里您可以使用 selector (即:'span:first')以获得跨度和 text为了获得跨度文本。像这样的事情:

console.log($('span:first').text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
  <del></del> <span>$80.40</span>
</div>

<小时/>

进一步阅读:

• innerText vs innerHtml vs label vs text vs textContent vs outerText
• Difference between text content vs inner text