Javascript querySelector vs. getElementById [fechado]

121

Eu ouvi isso querySelectore querySelectorAllsão novos métodos para selecionar DOMelementos. Como eles se comparam aos métodos mais antigos getElementByIde getElementsByClassNameem termos de desempenho e suporte do navegador?

Como o desempenho se compara ao uso do seletor de consulta do jQuery?

Existe uma recomendação de prática recomendada para qual conjunto nativo usar?

javascript jquery dom

— vai para Eleven
fonte

Defina melhor. Eles são quase totalmente diferentes.

Isso é como perguntar "uma chave de tamanho único é melhor do que uma chave ajustável?" A resposta é: eles são mais poderosos e mais flexível, e assim por diante muitas ocasiões superiores, mas getElementByIde getElementsByClassNameainda são ideais para os fins seus nomes descrevem.

— solitário dia

Ah, e qS/qSApode ser usado a partir de qualquer contexto de elemento, mas gEBIsó pode ser usado a partir do documentcontexto.

getElementByIdcorresponde aos idatributos para encontrar nós DOM, enquanto querySelectorpesquisa por seletores. Assim, para um seletor inválido por exemplo <div id="1"></div>, getElementById('1')iria trabalhar enquanto querySelector('#1')seria um fracasso, a menos que você diga a ele para coincidir com o idatributo (ex querySelector('[id="1"]').

— Samuel ELH

Apenas um FYI para quem está lendo isso, mas querySelectore querySelectorAllsão totalmente suportados agora. caniuse.com/#feat=queryselector

— Telarian de

Respostas:

130

"Melhor" é subjetivo.

querySelector é o recurso mais recente.

getElementByIdé melhor suportado do que querySelector.

querySelectoré melhor suportado do que getElementsByClassName.

querySelectorpermite encontrar elementos com regras que não podem ser expressas com getElementByIdegetElementsByClassName

Você precisa escolher a ferramenta apropriada para qualquer tarefa.

(Acima, para querySelectorler querySelector/ querySelectorAll).

— Quentin
fonte

suporte para querySelector: caniuse.com/#feat=queryselector

— tazboy

@JasonVanDerMeijden - É improvável que seja significativo, podendo variar de navegador para navegador.

— Quentin de

Muito boa resposta e aqui estão alguns testes de benchmark

— angel.bonev

por fim melhor suportados: getElementById> querySelector> getElementsByClassName, porque eu pensei que getElementsByClassNamedeve ter mesmo nível de apoio como getElementById?

— Lei Yang

Esta resposta não parece tocar na diferença entre os métodos, especificamente em relação ao desempenho.

— Dror Bar

As funções getElementByIde getElementsByClassNamesão muito específicas, enquanto querySelectore querySelectorAllsão mais elaboradas. Meu palpite é que eles terão um desempenho pior.

Além disso, você precisa verificar o suporte de cada função nos navegadores que você está direcionando. Quanto mais recente for, maior será a probabilidade de falta de suporte ou de a função "apresentar erros".

— Thiago Negri
fonte

@thomas, seu link está fora do ar. Existe um link funcionando em algum lugar?

— user5508297

Existem várias versões arquivadas: web.archive.org/web/20160108040024/http://jsperf.com/… Mas o teste é realmente muito antigo (2010), então o resultado pode ser muito diferente com motores mais modernos.

— thomas

A página arquivada, na verdade, é dinâmica e permite que você execute novamente o teste no navegador atual. querySelectorAll ainda é mais lento em cerca de 37% no meu navegador. (Chrome 71 - vgy.me/TwGL3o.png ) Também é importante notar que getElementById retorna um resultado ao vivo, o que significa que se você alterar o DOM, a mudança será refletida pelo resultado obtido por getElementByID (se estiver no escopo) enquanto a lista de nós retornado por querySelectorAll é um instantâneo, por exemplo, como as coisas estavam no momento em que a chamada foi feita, o resultado não refletirá as alterações subsequentes no DOM.

— W.Prins

nodelist ... is not livevocê pode fornecer documentação para isso? @ W.Prins ambos os métodos retornam o Elementtipo.

— Maximilian Burszley

Ah, vejo que cometi um erro de digitação, por favor aceite minhas desculpas! Eu deveria ter escrito "getElementsByClassName" onde escrevi "getElementByID", por exemplo, é getElementsByClassName (e semelhante) que retorna um conjunto de resultados ao vivo ". Na verdade, getElementsByClassName e querySelectorAll retornam um NodeList, mas no primeiro caso é ao vivo, e no último é um instantâneo.

— W.Prins