Compatibilidade querySelector() vs getElementById()

Percebi que eu praticamente não uso getElementById() e acabo usando querySelector() em todas as situações. Então, fui pesquisar qual seria a grande diferença entre os dois, ou por que usar um e não outro.

Percebi que a principal diferença entre os dois seria a compatibilidade em browsers. Sendo o querySelector() o mais recente, ele tem menor compatibilidade que getElementById(), que já entregava suporte à browsers mais antigos.

Pelo que li por alto, querySelector() trás novas possibilidades, o que ainda não é o motivo pelo qual eu o uso, porque ainda não encontrei a necessidade de usar nada alem da seleção de elementos com ele.

Então a pergunta: alguém já passou por problemas de suporte e compatibilidade por ter usado um em vez do outro? Seria um problema real? Parece tão irreal ter que dar suporte a browsers tão obsoletos que não tenham suporte a tecnologias atuais.

Exemplos são apreciados.

2 Likes

Oi @edubarros

Eu dei uma busca sobre os browsers que dão suporte para o método querySelector, segue o resultado:


fonte: Document.querySelector() - Web APIs | MDN

E concluí que os principais browsers são compatíveis nas versões atuais.

Quanto ao problema de suporte para versões antigas e obsoletas de browsers, você pode se fazer a seguinte pergunta:

A maioria dos usuários que desejo alcançar, usam os principais browsers com versões atualizadas?

Para ajudar a responder essa pergunta você pode pesquisar sobre o público alvo que deseja atender.

Cabe ressaltar que existem públicos e regiões onde os dispositivos são antigos e não aceitam mais atualizações de software (browser).

De toda forma acredito que na maioria dos casos não é um problema, mas existe essa ressalva do público.

Gostaria de acrescentar também que o querySelector aceita maior variedade de seletores, inclusive combinações, enquanto o getElementById é mais rápido porem mais limitado.

3 Likes

Olá, Thiago.

Obrigado por tentar contribuir.

Eu li a documentação, o link e a imagem que você trouxe são, inclusive, de um dos dois links das fontes que eu mencionei no segundo parágrafo do post, linkados diretamente para a seção de compatibilidade da página em ambos os métodos.

Compreendi as diferenças entre os dois métodos, e que querySelector(), como eu havia mencionado, que é mais novo, trouxe novas possibilidades. Mas eu estou procurando saber mais sobre as experiências, na prática.

Como a dúvida não é quanto a estes pontos, deixada a documentação de lado, por isso fiz o questionamento: “alguém já passou por problemas de suporte e compatibilidade por ter usado um em vez do outro? Seria um problema real? Parece tão irreal ter que dar suporte a browsers tão obsoletos que não tenham suporte a tecnologias atuais”.

Poxa Edu, não sei responder suas perguntas, mas estou aqui pra agradecer, pois não sabia dessas contabilidades do browsers. Obrigada!

Tranquilo.

É bom conhecer essas diferenças, saber que existem, mas a minha dúvida é na prática, saca? Se alguém que já tem aplicado isso em projetos pessoais, ou no mercado mesmo, já se deparou com alguma incompatibilidade.

Eu tenho a impressão de que isso nem deva afetar nada no dia a dia, na prática. Mas, se alguém já passou por isso, e tiver algum exemplo, eu gostaria de saber, porque eu acho bem mais prático continuar usando o meu querySelector() generalista.