javascript - 为什么 Array.from 返回的 [object HTMLParagraphElement] 不是段落中的内容？

Question

我正在尝试让 Javascript 根据页面其他地方的内容(特别是购物车摘要中的项目名称)读取和编写段落。问题是我无法让 Javascript 正确编写它们。

我需要写的段落是“Order Includes: Product 1, Product 2, etc.”但它返回的是“Order Includes: [object HTMLParagraphElement], [object HTMLParagraphElement], etc.”

<!-- Cart Summary -->
<p class="cartitems" id="Quantity">Product 1</p>
<p class="cartitems" id="Quantity">Product 2</p>

<!-- Paragraph to be written -->     
<p id="printItems"></p>

<script>
  var prods = document.getElementsByClassName("cartitems");
  var items = Array.from(prods);
  document.getElementById("printItems") = "Order Includes: " + 
  items;
</script>

我试过用

var prods = document.getElementsByClassName("cartitems").innerHTML;

和

document.getElementById("printItems").innerHTML = "Order Includes: " + 
  items;

但两者都返回 undefined。

Answer 1

Document.getElementsByClassName()方法返回 DOM 元素的集合。当您转换 HTMLCollection ，由该方法返回到一个数组 Array.from() ，使用回调从元素中获取 innerText:

var prods = document.getElementsByClassName("cartitems");
var items = Array.from(prods, el => el.innerText);
document.getElementById("printItems").innerHTML = "Order Includes: " +
  items.join(', ');

<!-- Cart Summary -->
<p class="cartitems" id="Quantity">Product 1</p>
<p class="cartitems" id="Quantity">Product 2</p>

<!-- Paragraph to be written -->
<p id="printItems"></p>