Третья программа: «Мессенджер»

Я сам не понял как выполнить это задание и зашёл на форум и посмотрел готовое задание и теперь постепенно по каждой строчке смотрю откуда и как человек брал значения и не могу понять почему в переменной ressage, написано ‘varTemp’querySelector(’.chat-message’);. Ведь когда мы пишем перед querySelector слово, то это означает что мы будем искать элемент только внутри этого слова, которое написано перед querySelector’om, но значения varTemp просто нету в html разметке, следовательно как мы будем искать элементы внутри varTemp, если его нету в html. Извините что может много глупых и простых вопросов, хочу разобраться в этом, чтобы потом не было тяжело при вёрстке сайта…

как это varTemp нет? там содержится коллекция узлов из 1 элемента. а из этой коллекции мы выбираем уже элемент с классом .chat-message

Вот сейчас дошло, получается мы ищем из переменной varTemp, которую я написал сам выше?

да, верно. document.querySelector() ищет из всего body, а мы конкретнее указываем из какого места искать, во избежание конфликтов (вдруг такой селектор есть где-то еще, кроме шаблона, например, в истории сообщений будут эти самые сообщения с этим классом)