JavaScript | Как превратить HTMLCollection в Array? (Коллекцию 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")
Создаём коллекцию HTML-элементов p
Создаём коллекцию HTML-элементов p

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

var mapP = vseP.map(t => {return t.innerText})
Метод map не работает с HTMLCollection
Метод map не работает с HTMLCollection

 

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

var vseParray = Array.from(vseP)
Преобразование HTMLCollection в Array
Преобразование HTMLCollection в Array

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

var mapP = vseParray.map(t => {return t.innerText})
Применение метода map для массива
Применение метода map для массива

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

var stroka = mapP.join(" ")
Соединение элементов массива JavaScript в строку с разделителем в виде пробела
Соединение элементов массива JavaScript в строку с разделителем в виде пробела

Способ № 2

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

var massivSpread = [...vseP]
Использование оператора Spread
Использование оператора Spread

 

Ссылки

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

Поделись записью