Tengo una página de la que estoy tratando de eliminar un elemento con esta sección de código

 oldContainer = $('div.choose-location-options'); oldContainer.addClass('hidden');

Estoy usando el selector $ porque leí en línea y en esta respuesta $ es la abreviatura de document.querySelector , este código funciona bien.
Durante la revisión del código, mis colegas me dijeron que no quieren que usemos $ porque no es la mejor práctica porque se parece a jquery. Así que lo cambié a esto.

 oldContainer = document.querySelector('div.choose-location-options'); oldContainer.addClass('hidden');

Sin embargo, este código devolverá un mensaje de error que dice que cannot add class to undefined
Ejecutar este código en el navegador también eliminará el oldContainer , así que pensé que era un problema con la carga de la página, así que agregué un detector de eventos al código para cargar una página.

 window.addEventListener('load', (event) => { oldContainer = $('div.choose-location-options'); oldContainer.addClass('hidden'); });

Esto también devuelve undefined Así que sé que no es un problema de tiempo. ¿Por qué funciona la abreviatura $ pero no document.querySelector ?