Размер растрового стека

В других словах

• document.querySelector() выбирает только первый элемент указанного селектора. Поэтому он не выплевывает массив, это одно значение. Подобно document.getElementById(), который извлекает только ID-элементы, поскольку идентификаторы должны быть уникальными.
• document.querySelectorAll() выбирает все элементы с указанным селектором и возвращает их в массиве. Похоже на document.getElementsByClassName() только для классов и document.getElementsByTagName().

Зачем использовать querySelector?

Используется просто для единственной цели легкость и краткость.

Зачем использовать getElement / sBy? *

Более быстрая производительность.

Почему это различие в производительности?

Оба способа выбора имеют целью создание NodeList для дальнейшего использования. querySelectors генерирует статический NodeList с селекторами, поэтому он должен быть сначала создан с нуля. getElement / sBy * немедленно адаптирует существующий живой NodeList текущего DOM.

Итак, когда использовать какой метод зависит от вас / вашего проекта / вашего устройства.

Infos

Демонстрация всех методов Документация NodeList Тест производительности