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

【问题标题】：Why is Array.from returning [object HTMLParagraphElement] not the content within the paragraphs?为什么 Array.from 返回 [object HTMLParagraphElement] 不是段落中的内容？
【发布时间】：2019-11-21 13:38:13
【问题描述】：

我正在尝试让 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;

但两者都返回未定义。

【问题讨论】：

What do querySelectorAll and getElementsBy* methods return?的可能重复

标签： javascript html arrays dom

【解决方案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>

【讨论】：

【解决方案2】：

document.getElementsByClassName 返回的是一个 HTMLCollection (HMTLCollection MDN Docs)

这是一个直接元素，它是 DOM 的一部分。所以不能直接解析成数组，可以使用下面的方法解析成你想要的数组：

var prods = document.getElementsByClassName("cartitems"); var parsedArray = Array.from([].slice.call(prods)); document.getElementById("printItems") = "Order Includes: " + items;

按照 Harpo 回复 (Harpo response) 的建议

注意：在这种情况下使用 Array.from 是可选的，因为 slice 返回的是一个数组。

【讨论】：