QuerySelector de JavaScript frente a getElementById [cerrado]

122

He escuchado eso querySelectory querySelectorAllson nuevos métodos para seleccionar DOMelementos. ¿Cómo se comparan con los métodos anteriores getElementByIdy getElementsByClassNameen términos de rendimiento y compatibilidad con el navegador?

¿Cómo se compara el rendimiento con el uso del selector de consultas de jQuery?

¿Existe una recomendación de buenas prácticas sobre qué conjunto nativo utilizar?

javascript jquery dom va a las once
fuente
1
Defina mejor. Son casi completamente diferentes.
4
Esto es como preguntar "¿es mejor una llave de un tamaño que una llave ajustable?" La respuesta es: que son más potentes y más flexible, por lo que en muchas ocasiones superiores, pero getElementByIdy getElementsByClassNamesiguen siendo ideal para los fines de sus nombres describen.
solitario
2
Ah, y qS/qSAse puede usar desde cualquier contexto de elemento, pero gEBIsolo se puede usar desde el documentcontexto.
3
getElementByIdcoincide con los idatributos para encontrar nodos DOM, mientras que querySelectorbusca por selectores. Así que para un selector no válido, por ejemplo <div id="1"></div>, getElementById('1')podría trabajar mientras querySelector('#1')fallaría, a menos que usted le diga que coincida con el idatributo (por ejemplo querySelector('[id="1"]').
Samuel Elh
3
Sólo una intensa para cualquiera que lea esto, pero querySelectory querySelectorAllson totalmente compatibles ahora. caniuse.com/#feat=queryselector
Telarian

Respuestas:

132

"Mejor" es subjetivo.

querySelector es la característica más nueva.

getElementByIdes mejor compatible que querySelector.

querySelectores mejor compatible que getElementsByClassName.

querySelectorle permite encontrar elementos con reglas que no se pueden expresar con getElementByIdygetElementsByClassName

Debe elegir la herramienta adecuada para cualquier tarea determinada.

(En lo anterior, para querySelectorleer querySelector/ querySelectorAll).

Quentin
fuente
7
Soporte de querySelector: caniuse.com/#feat=queryselector
tazboy
2
@JasonVanDerMeijden: es poco probable que sea significativo, es probable que varíe de un navegador a otro.
Quentin
2
Muy buena respuesta y aquí hay algunas pruebas de referencia
angel.bonev
qué mejor apoyado orden: getElementById> querySelector> getElementsByClassName, porque pensé que getElementsByClassNamedebería tener el mismo nivel de apoyo que getElementById?
Lei Yang
Esta respuesta no parece tocar la diferencia entre los métodos, específicamente en cuanto al rendimiento.
Dror Bar
43

Las funciones getElementByIdy getElementsByClassNameson muy específicas, mientras que querySelectory querySelectorAllson más elaboradas. Supongo que en realidad tendrán un peor desempeño.

Además, debe verificar la compatibilidad de cada función en los navegadores a los que se dirige. Cuanto más nuevo sea, mayor probabilidad de falta de soporte o de que la función tenga errores.

Thiago Negri
fuente
@thomas, tu enlace no funciona. ¿Hay un enlace que funcione en alguna parte?
user5508297
6
Hay varias versiones archivadas: web.archive.org/web/20160108040024/http://jsperf.com/… Pero la prueba es en realidad muy antigua (2010), por lo que el resultado puede ser muy diferente con motores más modernos.
Thomas
4
La página archivada en realidad es dinámica y le permite volver a ejecutar la prueba en su navegador actual. querySelectorAll sigue siendo más lento en aproximadamente un 37% en mi navegador. (Chrome 71 - vgy.me/TwGL3o.png ) También vale la pena señalar que getElementById devuelve un resultado en vivo, lo que significa que si cambia el DOM, el cambio se reflejará en el resultado obtenido por getElementByID (si está en el alcance) mientras que la lista de nodos devuelto por querySelectorAll es una instantánea, por ejemplo, como estaban las cosas en el momento en que se realizó la llamada, el resultado no reflejará los cambios posteriores al DOM.
W.Prins
nodelist ... is not live¿puede proporcionar documentación para eso? @ W.Prins ambos métodos devuelven el Elementtipo.
Maximilian Burszley
Ah, veo que cometí un error tipográfico, ¡acepta mis disculpas! Debería haber escrito "getElementsByClassName" donde escribí "getElementByID", por ejemplo, es getElementsByClassName (y similar) que devuelve un conjunto de resultados en vivo ". De hecho, tanto getElementsByClassName como querySelectorAll devuelven una NodeList, pero en el primer caso está en vivo y en el segundo es una instantánea.
W.Prins