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

Question

我有

<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？

Answer 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>

Answer 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>

Answer 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>

Answer 4

var numbers = x[i].textContent;

不要使用InnerHtml来使用textContent

Difference between textContent vs innerText

Answer 5

您可以使用spread syntax

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

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

Answer 6

给每个元素相同的类

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

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

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

我在这里使用.innerHtml