Введение в HTMLCollection и NodeList
При работе с DOM в JavaScript часто возникает необходимость получить группы элементов или узлов. Два наиболее распространенных типа таких коллекций - это HTMLCollection и NodeList. На первый взгляд они могут показаться похожими, поскольку обе являются подобными массивам, но они ведут себя по-разному в важных аспектах. Никто из них не является истинным массивом JavaScript, поэтому они не имеют всех обычных методов массива. Зная точно, что представляет собой каждая из этих коллекций, как их получить и где они различаются, может сэкономить часы отладки.
Что такое HTMLCollection?
HTMLCollection - это живая коллекция, содержащая только элементы-узлы (без узлов содержимого, комментариев и т. д.). Это не массив. Вы можете получить доступ к элементам по индексу или имени, но у него нет современных методов массива, таких как forEach, map, filter и т. д. Чтобы получить HTMLCollection, можно использовать следующие методы:
document.getElementsByTagName('p')document.getElementsByClassName('highlight')element.childrendocument.formsdocument.images
Важная особенность HTMLCollection заключается в том, что она является живой коллекцией, которая автоматически обновляется всякий раз, когда изменяется DOM (добавляются, удаляются или перемещаются элементы).
Что такое NodeList?
NodeList - это коллекция, которая может содержать любой тип узла (элементы, текстовые узлы, комментарии и т. д.). Некоторые NodeList являются статическими, а некоторые - живыми. Это также не массив, но современные NodeList более дружественные: они поддерживают методы forEach(), for...of, entries(), keys() и values(). Чтобы получить NodeList, можно использовать следующие методы:
document.querySelectorAll('p')(статическая)element.childNodes(живая)document.getElementsByName('username')(живая в некоторых случаях)
Важная особенность NodeList заключается в том, что большинство людей используют querySelectorAll(), который возвращает статический снимок. Другие NodeList (например, childNodes) являются живыми.
Основные различия между HTMLCollection и NodeList
Одним из ключевых различий между HTMLCollection и NodeList является поддержка метода forEach(). NodeList имеет поддержку forEach(), тогда как HTMLCollection - нет. Если вы попытаетесь использовать forEach() с HTMLCollection, вы получите ошибку TypeError: collection.forEach is not a function. Чтобы исправить эту проблему, необходимо сначала преобразовать коллекцию в настоящий массив, используя метод Array.from().
В целом, понимание различий между HTMLCollection и NodeList может помочь разработчикам избежать потенциальных ошибок и упростить работу с DOM в JavaScript.