JavaScript | Как превратить HTMLCollection в Array? (Коллекцию HTML элементов в массив)

Одной командой

Array.from(ТВОЯ HTML КОЛЛЕКЦИЯ)

Когда мы используем метод getElementsByTagName() интерфейса Document, мы получаем массиво-подобный объект интерфейса HTMLCollection.

В чём тут проблема?

Для коллекции HTML-элементов невозможно применить методы массивов, например метод map(). То есть если мы хотим пройтись по каждому элементу объекта HTMLCollection и шаблонно внести преобразования, то у нас ничего не получится т.к. в этом случае map() не будет считаться функцией.

Вот и получается, что нам сначала нужно из HTMLCollection сделать Array, а уже потом манипулировать с данными так как нам это нужно.

Исходный код

Например, мы имеем такой код:

<h1>HTMLCollection в Array</h1>
   <p>JavaScript</p>
<h2>Как?</h2>
   <p>мой</p>
<h3>Что?</h3>
<h3>Почему?</h3>
   <p>лучший</p>
<h4>Зачем?</h4>
   <p>друг</p>

Задача

Получить всё внутреннее содержимое абзацев <p> и представить его в виде одной строки.

Решение

1. Получаем коллекцию HTML-элементов <p>

var vseP = document.getElementsByTagName("p")

Пробуем применить метод map() по коллекции.

var mapP = vseP.map(t => {return t.innerText})

2. Превращаем коллекцию HTML-элементов <p> в массив. Будем использовать свойство конструктора Array — Array.from()

var vseParray = Array.from(vseP)

3. Применяем к массиву метод map() и достаём из каждого элемента внутреннее текстовое содержимое при помощи атрибута innerText. Получается новый массив (второй)

var mapP = vseParray.map(t => {return t.innerText})

4. Теперь нам остаётся просто получить строку с нужным содержанием. Для этого мы воспользуемся методом массивов join(), где в качестве разделителя будем использовать пробел.

var stroka = mapP.join(" ")

Соединение элементов массива JavaScript в строку с разделителем в виде пробела

Способ № 2

Можно использовать Spread оператор языка JavaScript — «. . .» , чтобы получить массив.

var massivSpread = [...vseP]

Ссылки

WHATWG — «Interface Document» — https://dom.spec.whatwg.org/#interface-document

WHATWG — «Interface HTMLCollection» — https://dom.spec.whatwg.org/#interface-htmlcollection

WHATWG — «getElementsByTagName» — https://dom.spec.whatwg.org/#dom-document-getelementsbytagname

ECMA262 — «Array.from ( items [ , mapfn [ , thisArg ] ] )» — https://tc39.es/ecma262/#sec-array.from

ECMA262 — «Array.prototype.join ( separator )» — https://tc39.es/ecma262/#sec-array.prototype.join

ECMA262 — «SpreadElement» — https://tc39.es/ecma262/#prod-SpreadElement