如何获取具有相同 class 名称的所有元素的内容？

Question

使用 javascript 获取具有相同 class 名称的所有元素的内容。如何从具有相同 class 的元素中获取所有 innerHTML 内容？我尝试了下面描述的代码，但它不起作用我只从元素中得到第一个 "Hello" 但我没有得到 "World! from the second element" 当然会有更多具有相同 [=23= 的元素]，不只是两个。

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

Answer 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() 来获取 children 的 innerHTML.

的数组，而不是 for 循环

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

如何获取具有相同 class 名称的所有元素的内容？

How get content of all element with same class name?

javascript

get

class

function

innerhtml