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