我想从多个类中获取 InnerHTML 元素答案

【问题标题】：I want to get the InnerHTML elements from multiple classes我想从多个类中获取 InnerHTML 元素
【发布时间】：2021-04-25 09:51:22
【问题描述】：

我可以使用下面的方法从单个类中获取 InnerHTML 值并输出到控制台

var price = document.getElementsByClassName("price1")[0].innerHTML;
console.log(price);

但是，我现在想从 3 个类中获取数值并将它们组合成一个数值。

HTML 看起来像这样

<div class="price">
 <span class="pounds">45</span>
 <span class="seperator">.</span>
 <span class="pence">99</span>
</div>

要求的结果是将 45.99 作为数值输出到控制台。

【问题讨论】：

Related
你可以这样做+document.querySelector(".price").innerText.trim().replaceAll(" ", "")

标签： javascript jquery console

【解决方案1】：

您可以保存所有值并在控制台记录它们的插值。 + 用于将字符串转换为数字。

针对嵌套两个 span 元素的情况进行了编辑：

const pounds = document.getElementsByClassName("pounds")[0].innerHTML;
const separator = document.getElementsByClassName("separator")[0].innerHTML.split('<')[0];
const pence = document.getElementsByClassName("pence")[0].innerHTML;

const price = +`${pounds}${separator}${pence}`
console.log(typeof price, price);

<div class="price">
  <span class="pounds">45</span>
  <span class="separator">.<span class="pence">99</span></span>
</div>

【讨论】：

这很好用，但是 HTML 有点错误，因为分隔符类嵌套在 pence 类中，如下所示 ' 42 .50 ' 所以我得到 45..50
如何从 .pence 类的 innerHTML 中删除 html 代码
不幸的是，我无法控制标记 - 令人沮丧的是它的嵌套
本质上，.pence 的 innerHTML 值是。50 我可以通过一种方法在 innerHTML 中不返回标记

【解决方案2】：

这里有一个小方法。

window.onload = function () {
  const prices = document.getElementsByClassName("price");
  Array.from(prices).forEach(function(oPrice){
      let currentPrice = oPrice.querySelector(".pounds").innerHTML;
      currentPrice += oPrice.querySelector(".seperator").innerHTML;
      currentPrice += oPrice.querySelector(".pence").innerHTML;
      console.log(currentPrice);
  });
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Prices</title>
</head>
<body>
  <div class="price">
   <span class="pounds">45</span>
   <span class="seperator">.</span>
   <span class="pence">99</span>
  </div>
</body>
</html>

选择所有价格，然后通过 querySelectors 使用 forEach “组合”价格。请注意，“currentPrice”是一个字符串。如果您需要将值作为数字，则必须转换字符串。这对您有帮助吗？

【讨论】：