Тёмный
No video :(

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

ManzDev
Подписаться 19 тыс.
Просмотров 8 тыс.
50% 1

¿Sabes las diferencias entre document.getElementById() y document.querySelector() o document.querySelectorAll()? Estos (y otros métodos) sirven para seleccionar elementos de un documento HTML y tienen diferencias sutiles. En este video explico como funcionan y que diferencias tienen, así como otros detalles.
¡Te lo explico!
TIMELINE:
00:00 Introducción
00:43 Marcado HTML
02:00 DOM
02:50 getElementById
03:23 console.log vs console.dir
04:25 getElementsByClassName
04:54 Desestructuración
06:25 getElementsByTagName
06:47 getElementsByName
08:33 querySelector
11:20 querySelectorAll
14:04 HTMLCollection vs NodeList
15:31 Se me fue la luz
15:33 Diferencias
16:18 Pregunta: Rendimiento
17:10 Elementos no existentes
17:53 Cierre
LINKS:
👀 Seleccionar elementos del DOM: lenguajejs.com/javascript/dom...
👀 Selectores CSS: lenguajecss.com/css/selectore...
¡No te olvides de seguirme! ⚡ manz.dev
---
📹 Twitch: / manzdev
📼 RU-vid: / manzdev
🐤 Twitter: / manz
📷 Instagram: / manz.dev
✈️ Telegram: t.me/ManzDev
🎶 Música del final: ncs.io

Опубликовано:

 

12 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 37   
@mariaalejandracalderonduqu8689
@mariaalejandracalderonduqu8689 3 месяца назад
Muchas gracias por tu contenido, que me ha sido de mucha ayuda. Excelente explicación. 😉
@rowertmendez2653
@rowertmendez2653 4 месяца назад
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
@ManzDev 4 месяца назад
¡Muchísimas gracias, Rowert! ¡Se agradece mucho ese comentario!
@cerm88
@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
@ManzDev Год назад
¡Me lo apunto! Gracias por el feedback, Carlos!
@alexandradearte
@alexandradearte 5 месяцев назад
🎉 qué maravilla haberte encontrado, tu contenido es perfecto para mi y explicas super bien 😊 GRACIAS
@ManzDev
@ManzDev 5 месяцев назад
Gracias a ti por pasarte y comentar!!
@agustinfernandez8876
@agustinfernandez8876 Год назад
"se me fue la luz" jajaja, pero debía ir en el video. Gracias Manz por la explicacion
@ManzDev
@ManzDev Год назад
Me despisté editando y no uní los fragmentos 😅
@carlosvelasco390
@carlosvelasco390 Год назад
Muy buena explicación. Gracias!!
@ManzDev
@ManzDev Год назад
¡Muchas gracias, Carlos!
@djvarela
@djvarela Год назад
Es excelente, muy completo. Muchas gracias Manz!
@ManzDev
@ManzDev Год назад
¡Gracias, Dieguito! ¡No te había agradecido este comentario! 🚀
@djvarela
@djvarela Год назад
@@ManzDev 🤗
@pepe7pw177
@pepe7pw177 6 месяцев назад
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.
@nicoux9581
@nicoux9581 Год назад
Gracias Manz!
@ManzDev
@ManzDev Год назад
¡Gracias a ti por pasarte y dejar el comentario, Nico!
@Black_Coding
@Black_Coding Год назад
Aca repasando, muchas gracias por el tutorial tan aclaro, opacidad : 0.000000000000000000001 🤘🏻
@ManzDev
@ManzDev Год назад
¡Gracias, Black! 😂
@juangroverpaxichuquichambi4577
😎👍 un crack
@ManzDev
@ManzDev Год назад
¡Graaacias, Juan! 🤩🚀
@emiliomillansanchez7408
@emiliomillansanchez7408 2 месяца назад
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
@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/
@mauricioutrera2561
@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
@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_
@MxnZ0_ 8 месяцев назад
@@ManzDev como puedo usar jQuery en mi documento html?
@ManzDev
@ManzDev 8 месяцев назад
@@MxnZ0_ ¿A qué te refieres exactamente?
@MxnZ0_
@MxnZ0_ 8 месяцев назад
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
@ManzDev 8 месяцев назад
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!
@WalyProgram
@WalyProgram Год назад
joder que video mas redundante
@ManzDev
@ManzDev Год назад
No sé a que te refieres... ¿En que sentido?
@primertv2285
@primertv2285 Год назад
cuando vallas hacer esos video cambia temas al el editor ya que es un poco incomodo visualizar el código 🙈🙈😅😅
@ManzDev
@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
@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í.
Далее
Grid CSS: Introducción y conceptos desde cero
17:49
Просмотров 11 тыс.
Grid CSS: Centrar, distribuir y alinear elementos
14:45
Animaciones Web HERMOSAS con VIEW TRANSITION
5:48
Просмотров 13 тыс.
Tutorial para aprender Animaciones CSS
20:26
Просмотров 18 тыс.
Grid CSS: Grids por área
10:20
Просмотров 4,4 тыс.
Flex CSS: Alinear, centrar y reordenar elementos
9:51
How I mastered Leetcode the unfair way
8:02
Просмотров 22 тыс.
Google DeepMind's New AI Robot & AGI by 2027!
8:19
Просмотров 8 тыс.
Cómo crear SOMBRAS EN CAJAS (con box-shadow)
11:07
Просмотров 4 тыс.