你如何使用 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

textContent 與 innerText 之間的區別

Answer 5

您可以使用傳播語法

 [...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