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.
