时间戳

首页 > 解决方案 > 为什么 Array.from 返回 [object HTMLParagraphElement] 不是段落中的内容？

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

问题描述

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

我需要正在编写的段落是“订单包括：产品 1、产品 2 等”。但相反，它返回“订单包括：[object HTMLParagraphElement]、[object HTMLParagraphElement] 等”

<!-- 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;

但两者都返回未定义。

标签： javascripthtmlarraysdom

解决方案

该Document.getElementsByClassName()方法返回 DOM 元素的集合。当您将该方法返回的HTMLCollectionArray.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>

推荐阅读