Diferencias entre getElementById vs querySelector (y otros métodos del DOM)

[@rowertmendez2653]

Manz! No sé tu nombre real, aún así, me paso por aquí porque quería agradecerte profundamente. Gracias a ti y a tus cursos, he logrado entender y avanzar mucho en este mundo. Pretendo entrar en este mundo de la programación a nivel laboral muy pronto! Tu mereces mucho más "Me gusta" más suscriptores y más apoyo para que puedas seguir haciendo material como este y como tu página web! Así que de mi parte tienes mi apoyo, un granito de arena! 😁Gracias!

[@ManzDev]

¡Muchísimas gracias, Rowert! ¡Se agradece mucho ese comentario!

[@cerm88]

Excelente! Deberías hacer un vídeo sobre la propagación de eventos y la delegación de eventos y si este último es necesario aplicarlo en frameworks de js como vue, react, etc.

[@ManzDev]

¡Me lo apunto! Gracias por el feedback, Carlos!

[@alexandradearte]

🎉 qué maravilla haberte encontrado, tu contenido es perfecto para mi y explicas super bien 😊 GRACIAS

[@ManzDev]

Gracias a ti por pasarte y comentar!!

[@mariaalejandracalderonduqu8689]

Muchas gracias por tu contenido, que me ha sido de mucha ayuda. Excelente explicación. 😉

[@agustinfernandez8876]

"se me fue la luz" jajaja, pero debía ir en el video. Gracias Manz por la explicacion

[@ManzDev]

Me despisté editando y no uní los fragmentos 😅

[@djvarela]

Es excelente, muy completo. Muchas gracias Manz!

[@ManzDev]

¡Gracias, Dieguito! ¡No te había agradecido este comentario! 🚀

[@djvarela]

@@ManzDev 🤗

[@carlosvelasco390]

Muy buena explicación. Gracias!!

[@ManzDev]

¡Muchas gracias, Carlos!

[@Black_Coding]

Aca repasando, muchas gracias por el tutorial tan aclaro, opacidad : 0.000000000000000000001 🤘🏻

[@ManzDev]

¡Gracias, Black! 😂

[@nicoux9581]

Gracias Manz!

[@ManzDev]

¡Gracias a ti por pasarte y dejar el comentario, Nico!

[@pepe7pw177]

Gran video. Excelente explicación. Una duda, sabes cómo se llama la canción, que más o menos comienza en el minuto 17:57?. Saludos.

[@emiliomillansanchez7408]

cuando utilizo el getElementById() me pasa que el vs code no detecta los métodos del elemento (por ejemplo un canvas) pero con Queryselector() si los detecta pero solo si utilizo la etiqueta, si utilizo el id (por ejemplo QuerySelector('#canvas') ) no los detecta. Esto tiene un razón y/o solusion?

[@ManzDev]

La verdad parece algo muy específico y no he entendido muy bien el problema. Te aconsejo echar un vistazo a nuestro servidor de Discord, quizás por allí puedas comentar el problema y te podamos ayudar: discord.manz.dev/

[@juangroverpaxichuquichambi4577]

😎👍 un crack

[@ManzDev]

¡Graaacias, Juan! 🤩🚀

[@MxnZ0_]

querySelector(): Mejor, flexible y más potente que getElementById(), pero incompatible con algunos navegadores viejos y ocupa más recursos getElementById(): Ocupa menos recursos y es mejor para obtener id´s específicos pero menos flexible y dinámico que querySelector() pd: no usen eventos en etiquetas html por favor

[@ManzDev]

De acuerdo en parte: - LEGIBILIDAD / FLEXIBILIDAD: querySelector() es la forma ideal hoy en día. Más potente, legible y flexible que getElementById. Requiere conocer un poco los selectores de CSS. - INCOMPATIBILIDADES: querySelector() es incompatible sólo con navegadores EXTREMADAMENTE viejos (estamos hablando de que tienen soporte navegadores lanzados en 2009, Internet Explorer 9 entre ellos). - RECURSOS: Aunque es cierto que consume ligeramente más querySelector, elegir uno u otro por esta razón es considerado un antipatrón (microoptimización), ya que es despreciable (muy pequeña) la diferencia. Respecto al tema de "no usar eventos en etiquetas HTML", no sé a que te refieres. Utilizar eventos en el DOM no es una mala práctica. Si por otro lado, te refieres a usar eventos como `onClick` como atributos del HTML, opino igual. Es recomendable cuando estás empezando para entender más fácilmente Javascript, pero a la larga el código se vuelve menos legible y se recomienda utilizar el addEventListener + uso del DOM desde Javascript. ¡Abrazo!

[@mauricioutrera2561]

Me encanta QuerySelector(), es casi como la clásica forma $('.loque-sea') de jQuery, que jQuery implemento hace décadas, pero en Nativo, es muy practico y genial, me encanta, y es mas corto de escribir que los otros xd.

[@ManzDev]

Totalmente de acuerdo. De hecho, querySelector y querySelectorAll se implementaron más tarde debido a lo práctico que fue el invento de seleccionar mediante selectores CSS de jQuery. ¡Abrazo!

[@MxnZ0_]

@@ManzDev como puedo usar jQuery en mi documento html?

[@ManzDev]

@@MxnZ0_ ¿A qué te refieres exactamente?

[@WalyProgram]

joder que video mas redundante

[@ManzDev]

No sé a que te refieres... ¿En que sentido?

[@primertv2285]

cuando vallas hacer esos video cambia temas al el editor ya que es un poco incomodo visualizar el código 🙈🙈😅😅

[@ManzDev]

¡Hola PrimerTV! Muchas veces se me olvida aumentar la fuente o no puedo hacerlo porque me quedo con muy poco espacio. ¿Qué es lo que te resulta incómodo exactamente en este caso? El tema concretamente mucha gente me dice que es muy limpio y claro...

[@UnDarkVader]

O haz zoom al código y muestra solo lo que te interesa mostrar. La ventana del navegador no deberías mostrarla a menos que quieras mostrar un comportamiento visual allí.