您如何使用 javascript 获取这些类中的内部文本？答案

【问题标题】：How do you get the inner text inside these classes with javascript?您如何使用 javascript 获取这些类中的内部文本？
【发布时间】：2018-09-18 13:07:41
【问题描述】：

我有

<div class="ce">
  <div class="lotB">9</div>
  <div class="lotB">3</div>
  <div class="lotB">28</div> == $0
</div>

我正在尝试获取这三个数字9, 3, 28，但我无法让它工作：s

已经尝试了几种不同的方法，我还阅读了有关 innerText 并尝试通过像这样通过 ce 类来使其工作

var x = document.getElementsByClassName("ce");
for (var i = 0; i < x.length; i++) {
  var numbers = x[i].innerText;
  alert(numbers);
}

但这也没有给我任何东西：/

你如何得到这些类的内部文本，所以我得到了数字9, 3, 28？

【问题讨论】：

你选错了课程。
如果您根本没有收到警报，那么您的代码在元素存在之前就已经运行了，例如，您的代码在 head 中，而 body 还没有被解析。
感谢大家的帮助，它现在工作得很好，很高兴知道获得这项工作的不同方法！ :)

标签： javascript

【解决方案1】：

您可以使用querySelectorAll() 来定位类中的所有div。将选择器更改为：

document.querySelectorAll(".ce > div");

var x = document.querySelectorAll(".ce > div");
for (var i = 0; i < x.length; i++) {
  var numbers = x[i].innerText;
  alert(numbers);
}

<div class="ce">
  <div class="lotB">9</div>
  <div class="lotB">3</div>
  <div class="lotB">28</div> == $0
</div>

【讨论】：

为什么不直接.lotB？

【解决方案2】：

您需要执行var x = document.getElementsByClassName("lotB")，因为lotB 具有该值。另请注意，如果您想对该值执行任何算术运算，您需要使用parseInt(numbers) 来获取其数字表示。

var x = document.getElementsByClassName("lotB");
for (var i = 0; i < x.length; i++) {
  var numbers = x[i].innerText;
  alert(numbers);
}

<div class="ce">
  <div class="lotB">9</div>
  <div class="lotB">3</div>
  <div class="lotB">28</div>
</div>

【讨论】：

【解决方案3】：

var x = document.getElementsByClassName("lotB");
for (var i = 0; i < x.length; i++) {
  var numbers = x[i].textContent;
  alert(numbers);
}

<div class="ce">
  <div class="lotB">9</div>
  <div class="lotB">3</div>
  <div class="lotB">28</div> == $0
</div>

【讨论】：

【解决方案4】：

var numbers = x[i].textContent;

而不是使用InnerHtml 使用textContent

Difference between textContent vs innerText

【讨论】：

【解决方案5】：

你可以使用spread syntax

[...document.getElementsByClassName("lotB")].forEach(e=&gt;console.log(e.innerText));

<div class="ce">
  <div class="lotB">9</div>
  <div class="lotB">3</div>
  <div class="lotB">28</div> == $0
</div>

【讨论】：

【解决方案6】：

为每个元素赋予相同的类

  <div class="ce">
   <div class="lotB">9</div>
   <div class="lotB">3</div>
   <div class="lotB">28</div> == $0
  </div>

这里的关键是它说“get elements”，因此它可以处理多个相同的类

var x = document.getElementsByClassName("lotB");
for (var i = 0; i < x.length; i++) {
  var numbers = x[i].innerHtml;
  alert(numbers);
}

我在这里使用 .innerHtml

【讨论】：