Столкнулся с странной ошибкой при попытке развернуть список изображений. Вот мой код:
var picturesList = [];
picturesList = document.querySelector('#containerDiv').querySelectorAll('img');
picturesList.reverse();
В браузере Firefox получаю ошибку:
picturesList.reverse is not a function
Не могу понять в чем дело. Переменная picturesList нормально перебирается через цикл for, можно обращаться к элементам через индекс picturesList[0], picturesList[1] и так далее. Но почему-то браузер не видит её как массив когда пытаюсь вызвать метод reverse().
В чем может быть причина такого поведения? Как правильно развернуть коллекцию DOM элементов?
Эту штуку можно еще решить через старый добрый Array.prototype.slice.call(picturesList).reverse() - работает везде, даже в древних браузерах. Правда выглядит страшновато, но зато надежно. Еще вариант - сразу реверсить через обычный цикл, если не хочешь заморачиваться с конвертацией в массив. Просто обходишь NodeList от последнего к первому элементу.
У тебя проблема в том, что querySelectorAll возвращает NodeList, а не обычный массив. Хотя по индексам можно обращаться и циклом перебирать, но методов массива у него нет. Я сталкивался с такой же проблемой раньше. Самый простой способ - конвертировать в массив через Array.from(): picturesList = Array.from(document.querySelector('#containerDiv').querySelectorAll('img')), и потом уже спокойно reverse() вызывать. Либо можно через spread оператор [...picturesList], но первый вариант понятнее.
Да, это классическая засада с DOM коллекциями! querySelectorAll дает NodeList которая только прикидывается массивом. Я обычно сразу делаю [...document.querySelectorAll('img')].reverse() - короче и работает. А ты уже пробовал другие методы массивов вызывать или только с reverse столкнулся?