Почему Array.from возвращает [объект HTMLParagraphElement], а не содержимое в абзацах?

Question

Я пытаюсь заставить Javascript читать и писать абзацы на основе содержимого в другом месте страницы (в частности, названия предметов в сводке корзины).Проблема в том, что я не могу заставить Javascript писать их правильно.

Мне нужно, чтобы записываемый абзац был «Заказ включает: Продукт 1, Продукт 2 и т. Д.»но вместо этого он возвращает «Порядок включает: [объект HTMLParagraphElement], [объект 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;

Но оба возвращают неопределенное.

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>

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

Как указано в ответе Гарпо ( Ответ Гарпо )

ПРИМЕЧАНИЕ: использование Array.from в этом случае было бы необязательным, поскольку возвращаемый срез является массивом.