И избегайте этой простой ошибки.
Попытка вырваться из цикла for
Заметка для себя: я работаю с DOM (объектной моделью документа). Мне нужно выделить все элементы ‹section› в документе. Затем мне нужно перебрать результаты, чтобы каким-то образом изменить каждый элемент. Я делал это раньше. Мой первый инстинкт - дотянуться до старого верного цикла ...
Но подождите, может пора опробовать методы forEach () или map ()?
Почему нет! Поэтому я делаю свой выбор и пробую карту (). И появляется ошибка…
let x = document.getElementsByTagName('section');
let newArray = x.map(el => el.textContent = 'new content');
Uncaught TypeError: x.map не является функцией… 😨
Фу! Очень заманчиво вернуться к циклу for прямо сейчас и оставить эту ошибку далеко позади, но я не сдаюсь так легко. Я собираюсь попробовать forEach (). В любом случае мне не нужно было возвращать новый массив результатов. Мне просто нужно внести изменения в каждый элемент. Но я получаю такую же ошибку…
x.forEach(el => el.textContent = 'new content');
Uncaught TypeError: x.forEach не является функцией… 😨 😨
Так в чем проблема?
Проблема в том, что у меня не было массива для использования с map () или forEach (). У меня была HTMLCollection.
Использование document.getElementsByTagName () возвращает HTMLCollection. Цикл for будет перебирать HTMLCollection. Нет встроенных методов, таких как forEach () или map ().
А как насчет использования document.querySelectorAll ()? Хороший вопрос, и ответ - да и нет. У меня все равно не было бы массива. Этот подход вернет Список узлов. В списках узлов есть несколько встроенных методов, включая forEach (), но они не поддерживают map ().
Распространение синтаксиса на помощь!
Хорошие новости: я могу легко создать новый массив из моей HTMLCollection или Node List с помощью одной быстрой строки кода. Это просто требует использования синтаксиса распространения!
let spreadArray = [...x];
Теперь я могу использовать forEach () или map () в моем новом массиве. 😎
Вывод
Таким образом, помните, что выбор из DOM с помощью document.getElementsByTagName (), document.getElementsByClassName () или document.querySelectorAll () не вернет массив результатов. Тем не менее, одна быстрая строка кода, использующая синтаксис распространения, создаст массив из этих результатов. А у массивов есть так много методов на выбор, включая map () и forEach ().
Свяжитесь со мной в любое время в LinkedIn или Twitter. И если вам понравилась эта статья, дайте ей несколько аплодисментов. Я буду искренне признателен.
Https://www.linkedin.com/in/davidagray/
