querySelector devuelve un (el primer) elemento encontrado y utiliza un selector de estilo CSS.

querySelectorAll devuelve una lista de nodos (que, según la compatibilidad de su navegador, es posible que deba convertir en una matriz para trabajar) y utiliza el mismo selector de estilo CSS.

getElementById toma una cadena y solo encuentra un elemento que coincida con esa ID (las ID deben ser únicas).

getElementsByClassName toma una cadena y coincide como ID, pero puede devolver una matriz como una lista de elementos.

Si está familiarizado con los selectores de CSS, puede usar querySelector y querySelectorAll para casi todas las situaciones. El rendimiento es bastante parecido al de getElement* , pero son mucho más potentes. Por ejemplo, si desea obtener un span que sea el primer hijo de una class en un id , puede hacer .querySelector('#id .class span') en lugar de encadenar .getElementById('id').getElementsByClass('class')[0].getElementsByTagName('span')[0] .

No creo que haya reglas específicas sobre qué usar y cuándo, pero compartiré mis opiniones con respecto a cada método:

• getElementById: se puede usar para elementos que solo existen una vez y tienen una identificación
• getElementsByClassName: para elementos que tienen un nombre de clase que se puede consultar
• querySelector: utilícelo cuando desee consultar un elemento específico
• querySelectorAll: igual que querySelector pero para múltiples elementos

caniuse.com es un gran recurso para verificar la compatibilidad del navegador.