Разница между методами querySelector и querySelectorAll при работе с классами заключается в том, что querySelector возвращает первый элемент, а querySelectorAll — все элементы. 13

querySelector выполняет поиск по CSS-селектору и возвращает первый элемент, соответствующий указанному классу. 23 Если поиск не увенчался успехом, возвращается значение null. 3

querySelectorAll возвращает коллекцию (NodeList) всех найденных элементов на странице, соответствующие указанному классу. 3 Полученный набор представляет собой статическую коллекцию HTML-элементов, которая не изменяется. 1 Чтобы обновить набор, querySelectorAll нужно вызвать заново. 1

Таким образом, querySelector ищет только один HTML-элемент, а querySelectorAll — все элементы, подходящие под указанный CSS-селектор. 1