如何获取具有相同类名的所有元素的内容？答案

【问题标题】：How get content of all element with same class name?如何获取具有相同类名的所有元素的内容？
【发布时间】：2019-10-19 09:54:37
【问题描述】：

使用 javascript 获取具有相同类名的所有元素的内容。如何从具有相同类的元素中获取所有 innerHTML 内容？我尝试了下面描述的代码，但它不起作用我只从元素中得到第一个“Hello”，但我没有从第二个元素中得到“World！”当然会有更多具有相同类的元素，而不是只有两个。

function myFunction() {
  var child = document.querySelectorAll(".child");
  var child, i;
  for (i = 0; i < child.length; i++) {
    var childall = child[i].innerHTML;
  }

  document.getElementById("demo").innerHTML = childall;
}

<div class="parent" id="parent">
  <div class="child" id="child">Hello</div>
  <div class="child" id="child">World!</div>
</div>
<button onclick="myFunction()">click</button>
<div class="demo" id="demo">

【问题讨论】：

var childall += child[i].innerHTML; - 您应该使用 += 将新内容附加到现有的 childall 值上。您还应该将 childall 声明移到 for 循环之外，然后在里面添加。
在你的循环外声明var childall = "";。然后使用+= 将innerHTML 附加到childall

标签： javascript function class get innerhtml

【解决方案1】：

将childall 移出循环，并为其分配一个数组。现在将所有 innerHTML 值推入其中。循环结束后，将数组加入一个字符串，并分配给 demo。

function myFunction() {
  var child = document.querySelectorAll(".child");
  var child, i;
  var childall = [];
  for (i = 0; i < child.length; i++) {
    childall.push(child[i].innerHTML);
  }

  document.getElementById("demo").innerHTML = childall.join('<br>');
}

<div class="parent" id="parent">
  <div class="child" id="child">Hello</div>
  <div class="child" id="child">World!</div>
</div>
<button onclick="myFunction()">click</button>
<div class="demo" id="demo">

您可以使用Array.from() 代替for 循环来获取一组孩子的innerHTML。

function myFunction() {
  const childall = Array.from(document.querySelectorAll(".child"), el => el.innerHTML);

  document.getElementById("demo").innerHTML = childall.join('<br>');
}

<div class="parent" id="parent">
  <div class="child" id="child">Hello</div>
  <div class="child" id="child">World!</div>
</div>
<button onclick="myFunction()">click</button>
<div class="demo" id="demo">

【讨论】：

谢谢你这很好用。但是如何获得“世界”这个词！在“你好”下面，而不是在...旁边，我尝试使用
但 nathing...