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

Question

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

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

代替 for 循环，您可以使用Array.from()来获取一组孩子的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">