JavaScript. NodeList против HTML коллекции. QuerySelector против getElementsByTagName

👇 Разверни для полной информации

00:00 Задача из телеграм
01:00 Получаем NodeList и HTML collection
03:30 Живая коллекция HTML и NodeList
07:34 ForOf для перебора NodeList
11:03 HTML коллекция и циклы
12:20 HTML коллекция и forEach
14:00 Живая коллекция и ArrayFrom

Моя рабочая станция:
Processor: AMD Ryzen5 1600 Six-core processor
Video: Asus GeForce GTX 1650 Phoenix 4GB GDDR6
RAM: 16GB
Motheboard: MSI A320M PRO-M2 V2
HDD:
- Samsung 860 Evo-Series 500GB M.2
- Toshiba P300 2TB
- Silicon Power A56 256GB

Power: Chieftec Value APB-400B8 400W Bulk
Monitors:
- 23.8" Dell P2419HC
- 23.8" Dell P2418D

Box: Gougar MX350 Mesh

Mouse: Trust Verto Ergonomic Wireless
Keyboard: HP KU-1469
Microphone: Samson C01U Pro

+ MacBook Pro M1 13'' 8-Core CPU/8-Core GPU/16-core Neural Engine /16GB/256GB
+ IBM Lenovo ThinkPad E14 / Intel Core i5-1135G7 (4.2 ГГц) / RAM 16 ГБ / SSD 1 ТБ / Intel Iris Xe Graphics

[jinke]

Это мастхэв - разбирать на практике теоретические нюансы. Спасибо вам, Александр!

[ii]

Александр, тема вообще не раскрыта, предлагаю продолжить и рассказать зачем нужно одно, а зачем второе и как правильно с этим работать чтоб не загрузить память по самое не могу.)))
Они оба не массивы! Как я понимаю это что-то на подобии множества но упорядоченное, список что ли, хз как это обозвать в js... Если мне не изменяет память, NodeList парсит лишь один раз сохраняя в памяти состояние, и обращается к этому сколько надо раз, что многократно ускоряет работу приложения. А вот HTMLCollection при каждом вызове будет перепаршивать страницу, забивая как память, так и замедляя работу приложения. Я лично, если мне надо живая коллекция, вешаю на блок обертку где оно мне надо id, и уже у id это все вызываю, тогда оно не перепаршивает всею страницу, а лишь то что находиться в данном блоке. На сколько помню, это считается самым правильным способом получения живой коллекции.
Но я не супер гугу js, могу ошибаться.))) чаще всего мы все ровно используем или библиотеку, или фреймворк и там оно уже оптимизировано. Но знать как оно работает из коробки, обязан каждый!)))

[rtfwhzf]

Первым делом лайк! Как всегда доходчиво и понятно, восполнил некоторые свои пробелы, спасибо за работу!!!

[hommy]

Очень полезное видео! С этими живыми коллекциями надо понять. Прям огромное спасибо!

[alexanderalexander]

Отлично! То что надо!
Просто и понятно.
Спасибо за толковые объяснения!

[goodman]

Я даже и не знал про нодлисты)
Всегда использовал коллекции. Хотя квериселектор использовал)

[aleksey]

Александр спасибо, как всегда разжевал и в клювики положил)).

[Vasili_Malai]

С этими сущностями есть нюансы, например если мы используем свойство.childNodes и получаем таким образом NodeList, то он почему-то оказывается динамичным, то есть добавив новый элемент - обновляется и NodeList, что вносит еще большую неразбериху. Все вроде кажется просто, а на практике нет.

[annashirinskaya]

Алексей, а что вы советуете использовать на практике и почему: NodeList (получаем через quarySellectorAll, неживая коллекция) или HTMLCollecton (получаем через getElementByClassName, живая коллекция).
quarySellectorAll - советует чаще всего использовать, хотя по идее HTMLCollecton дает доcтуп к новым элементам, созданным через JS

Спасибо за ваш канал, всегда очень хорошо и понятно обясняете! Смотрю сейчас ваши видео про асинхронность в JS)

[Jonstonrich]

Обратите внимание что у NodeList можно вызвать метод foreEach, но это не метод Array.prototype.

[stepcx]

Спасибо за видео. А как работать с данными, которые в массиве? к примеру записать все элементы в переменную и занести в блок DIV с помощью innerText ? я когда так делаю - у меня заносится только последний элемент массива ( очевидно, потому что к моменту полной загрузке страницы массив уже весь перебрался и переменная принимала значение несколько раз разное. так как сделать что бы "склеить" элементы массива в список и вывести на страницу?

[MrWanderer]

Тогда получается, что для разработчика более лучшим вариантом является получение элементов с одинаковым классом через getElementsByClassName? Например, на странице есть 4 одинаковых блока (например, с отзывами) с красным bg-color. Получаю их через querySelectorAll, перебираю циклом (или создаю массив из полученного NodeList и перебираю его элементы) и меняю им bg-color на светло-синий. Но вот потребовалось внести ещё два таких же дополнительных блока с тем же классом. Вносим их (итого уже 6) и на выходе получаем, что эти два новых - красные, т.к. в первоначальный NodeList не попали из-за его статичности. То есть выходит, что нужно менять им цвет уже вручную (что не слишком удобно, особенно если добавленных элементов много). А getElementsByClassName позволяет избежать такого "геммора" из-за динамичности HTMLCollection - действительно так?

[frogman]

сори за глупый вопрос . Прокакую именно документацию вы

[sudactudak]

Можно ли сказать, что область видимости querySelector, который получает NodeList - это сам html документ, в котором мы подключаем наш скрипт, а область видимости getElement..., который получает HTML Collection - это напрямую страница в браузере? Ведь в панели разработчика мы также видим элементы, добавленные с помощью JS

[KanalReal]

а вы задумывались, что американцы и англичане не переключают язык на клавиатуре.

[krivalex]

да что так долго, все это можно было рассказать за 5 минут. Но за видео спасибо.

[masterng]

Такая путаница, по моему в PHP, такого нет, поэтому мне не понятно зачем такие сложности.