Curso JavaScript: 62. DOM: Nodos, Elementos y Selectores -
ฝัง
- เผยแพร่เมื่อ 2 ต.ค. 2024
- En este video te enseño los conceptos de nodos, elementos y selectores en el #API del #DOM de #JavaScript.
💛 Aprende JavaScript aprendejavascr...
📖 Mis notas sobre JavaScript jonmircha.com/...
📖 Mis notas sobre ECMAScript jonmircha.com/...
📖 Mis notas sobre JavaScript Asíncrono jonmircha.com/...
📖 Mis notas sobre JSON jonmircha.com/...
📖 Mis notas sobre el DOM jonmircha.com/dom
📦 Códigos: github.com/jon...
🔔 Suscríbete al canal th-cam.com/users/jo... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
📫 Suscríbete a mi lista de correo tinyletter.com...
No puedo creer lo fácil que me haces entender, estoy estudiando programación y a mis profesores no los entiendo, llegué a pensar que no servía para la programación. Un día encontré un video de un programador muyyy bueno que subió un video de motivación. Y dijo. """ Aprender no es difícil el secreto es buscar un buen mentor, alguien que realmente entienda y ame lo que hace""" y hoy digo que sos mi nuevo profesor y ojalá aprenda mucho de vos, gracias por lo videos. (PD: no abandono mis estudios pero ya no entro a sus clases en vivo, solo hago los ejercicios aprendiendo de tus vídeos)
🥰👋🏻
Sos el mejor , cada vez que termine un video, te lo voy a comentar. Boss.
Muchas gracias!
jjajaja Wao, no sabia que se podia hacer eso con vsc nav#menu>ul>li*5>a{Sección $}
💪🤓
esta superrrr eso, donde puedo aprender mas de eso
@@eder3232 En el sitio oficial de VS Code lo buscas como Emmet.
@@estebanguzman3356 :O es cierto, gracias bro
Gracian Jon. Ya he visto mucho de tus cursos como Flexbox, Grid, CSS, HTML y Figma y todo lo de Javascript hasta esta clase. Podrías recomendarme otra pagina equivalente a placeimg que no tenga que hacerme miembro en lo posible porqué esta ya no está en funcionamiento. Muchas Gracias!
como comentario Profe. Jon, el recurso de las imágenes, placeIMG dejó de publicar imágenes el 30 de junio de 2023.
Gracias por compartir sus conocimientos.!!!
👋🏻😉
que si me produce valor el contenido ?, el que diga que no mejor ni siga viendo el curso, muchas gracias por todo esto que nos enseña sensei 🤘🤘🤘🤘🤘🤘
todos moribundos desde la clase 61 para atras an revivido cuando llegado al dom XD jajaja
Estaba siguiendo una clase en otro canal y el muchacho hablaba muy rápido, así que decidí bajar la velocidad de reproducción a 0.75. Luego me vine a esta lección y casi me da algo jajajaajajja cuando lo oi hablar así tan lastimosamente pensé que tenía el virus chino 😂😅😂😅 ¿pero qué le pasó a mi profesor? Olvidé regresar la velocidad a "normal". Qué loca yo!
jajajaja, este curso esta libre de Covid te lo aseguro :P
not sure if you guys gives a shit but if you guys are bored like me atm you can stream all the latest movies on InstaFlixxer. Have been watching with my girlfriend lately :)
@Bentlee Issac yea, I have been using InstaFlixxer for months myself :D
Yo pongo los videos a x2 xd
El querySelector x alguna razón no permite visualizar en el autocompletado todas las propiedades de un elemento a diferencia de con getElementById algo curioso q he descubierto
😮
Nunca había dejado un comentario en ninguno de tus videos, pero a pesar de que ya pasaron 3 años me ayudaste mucho y te admiro aún más; gracias por el don que tienes para la docencia, por el tiempo que dedicaste a este maravilloso curso, y por, indirectamente avivar esa llama que llevo en mí y que está relacionada a la programación, después de 62 videos te agradezco por tu tiempo, por tus conocimientos y por compartirlos a este mundillo. Muchísimas gracias Jon
👋🏻😉
naaaaa no puedes ser asi de bueno carajo!! .. :) .. me encanta!!
Como se reemplaza console.log(document.getElementsByName("nombre")); por querySelector? Gracias
"[name='nombre']"
gracias genio
Gracias por comentar
sept 11 1969**Oct 26 2023
gracias excelente curso
felicidades John Mircha
Gracias, saludos
He aprendido muchas cosas que no tenía tan claras, siga así profe. :)
🤓 de nada, comparte para llegar a más gente
Amigo , ayuda por favor me cargan normal las imagenes , pero en el console me sale este error dom.html:87 GET 127.0.0.1:5500/tutorialjs/dom.js net::ERR_ABORTED 404 (Not Found) y mas abajo me sale estos 2 errores mas--- Indicate whether a cookie is intended to be set in a cross-site context by specifying its SameSite attribute ---- este es otro error -- --ndicate whether to send a cookie in a cross-site request by specifying its SameSite attribute
😮
excelentes videos, hasta ahora el mejor en explicar - 2024
👋🏻😉
creo que me ire a ver tu curso de html de 5 videos y 47 horas de reproduccion y luego vuelvo
porque no tengo conocimiento del manejo de html 🤣🤣
😅 Suerte😉👋🏻
cuando estas escribiendo al tiempo l categoria de animals como haces para que se escriba en el figcaption y en el alt al tiempo lo mismo con que atajo ? por favor
Eso lo explico en mi curso de VSCode th-cam.com/video/KpgVF0mXOUs/w-d-xo.html
tendré que repasar html jaja Muchas gracias por el curso!
Si quieren obtener un nodo por su atributo name utilicen el siguiente metodo:
console.log(document.querySelector("[name = nombre]"));
🤓👍🏻
Porque me siento un poco perdido con todo el DOM'? :(
😮
Me pareció extraño el cambio en el uso de métodos y parece que todo tiene mucho más fondo del que parece, mucho cuidado al usar querySelectorAll porque por lo visto devuelve una colección de nodos estáticos, no así como los getElement* que devuelven nodos vivos.
Grandioso Cursoooo checkpoint
😉👋🏻
Gracias por los conocimientos :)
Con gusto
Gran explicación!!!
Gracias!👋🏻😉
el plugins que usa no lo encuentro alguien que me lo escriba porfa uwu
cuál ?
en el min 2:20 hablas sobre un pluggin para escribir mas rapido html @@jonmircha u_u y gracias por responder y por tus cursos
gracias excelente video
👋🏻😉
Muy bien explicado Jonathan, me gusta cuando haces incapie en el hecho de utilizar el getElementById para que sea mas rapida la ejecucion, ya nos lo has remarcado en varios videos el echo importante de agilizar el proceso del codigo par que se carge mas rapido, muchas gracias por todo y por los detalles que nos ofreces, mil gracias de verdad!!!
;)
Si están usando la etiqueta script:src y alguno de los métodos mostrados en este video resulta "null", es porque estarían llamando al documento antes de cargarse, por lo que les recomendaría usar un setTimeout() u otro método para que resulte en los valores correctos.
O simplemente podrían ponerlo como type = "module".
👍🏻
Hola, a mi me resulta null, undefined o "no es una funcion" cuando intento usar getAttribute, setAttribute o querySelector y ya intente con el setTimeOut. Alguna recomendación me ayudaria un montón 🙏
Hola n me aparecen las imagenes no se por que
Fantástica la clase de hoy. Muchas gracias.
Algo que note es que getElementsByTagName, getElementsByClassName y getElementsByName devuelven un HTMLCollection. Mientras que querySelectorAll devuelven un Nodelist. Supongo que en la practica es lo mismo... 🤷♂
sí😉
Cada vez más me da emoción haber encontrado un maestro como Jon, es el mejor maestro 🤩🤩🙌
👋🏻😉
sept 11 1969**Nov 9 2023
gracias excelente curso
felicidades John Mircha
👋🏻😉
gracias amigo
Con gusto
Casi reclamo cuando dijiste "a nuestra hoja de programación HTML" xD!! creéme estuve a punto de dejar un comentario reclamando :v
🤔
hay alguna herramienta para ir escribiendo en js y ver al mismo tiempo el explorador?, me toca trabajar con Alt+Tab Mircha+Visual Studio Code+Explorador 😁😁, De antemano, gracias
Te vas a Extensiones (Ctrl + Shift + x) y colocas: Live Server, luego de instalarlo, vas al documento HTML das click derecho y das click en Open with Live Server, y todo lo que este en la etiqueta script de ese HTML cambiara automaticamente en el navegador con solo guardar (Ctrl + s) en Visual Studio Code. Espero te ayude ;)
cual de todas las extensiones emmet utilizas?
extensiones??? o atajos???
@@jonmircha atajos de escritura en html, hiciste algo asi como #menu>ui>li*5
@@jurrrgenOF docs.emmet.io/abbreviations/syntax/
Alguien en 2023 viendo este maravilloso curso?
Tengo una duda a partir de aquí es necesario saber HTML y CSS para poder entender el resto de videos?
Sí
una pregunta , pensaba que forEach solo funcionaba con arrays, porque esta funcionando con document.querySelectorAll("a") cuando se supone que es un objeto?
funciona en objetos iterables, lo que devuelve querySelector es un objeto iterable
hola profesor una pregunta:
¿Por qué cuando agrego html con javascript no me funciona el querySelectorAll. Pero si me funciona con getElementByClassName?
seguro tienes un error, quiza te falta agregarle el punto a tu selector de clased
Si mi profesor, le agrego el punto al querySelectorAll y querySelector siempre que los uso. el fallo siempre me pasa cuando los elementos que quiero seleccionar con querySelectorAll son documentos que son agregados con javascript por funciones y bucles.
@@jonmircha eso elementos los agrego asi:
div.innerHtml = `hola mundo`
mostro que buen video me gustaria saber como puedo validar que un (ul) contiene o no (li) pero de un div en especifico
Podrías comparar el children del ul con ayuda del método matches
Hola
✌🏻
No sé si sea mala practica y tal... pero suelo colocar las NodeList dentro de un array, y dependiendo de cual deseo utilizar que si las de ciertas clases, que si las de cierto elemento etc... itero el array seleccionando la NodeList que deseo utilizar, eso puede afectar el rendimiento de mi web?
Por ejemplo:
listas_nodos = [NodeList(15), NodeList(26), NodeList(10)]
for(let iterator in listas_nodos){
listas_nodos[0][iterator]
}
No es mala idea, fijate que esa forma que comentas es muy similar al manejo del estado en React cuando cargas los datos dinámicamente de una API externa
Jon, en 15 dias voy a ingresar a estudiar Full Stack Web Development en Canada y con todo lo que he estudiado por Internet + los valiosos videos que he visto hasta la fecha como nodos, elementos y selectores, voy a entrar con ventaja. Gracias! Te invito un taco cuando vuelva a Mexico. PD> Mi teclado esta en ingles, por eso las no tildes. :3
😉👋🏻
usá inglés internacional como idioma y con altGr + la vocal podrás acentuar
Esto va cogiendo ritmo. Así voy enlazando conocimiento. gracias Sr. Mircha
Excelente!👋🏻😉
🧙♂Muchas gracias por los videos, muy buen curso!!!
Con mucho gusto
Profesor tengo una confucion entre el Element y el Document
Resulta que utilizo la documentación que usted coloca en los vídeos y cuando reviso los metodos de elemet estan los mismos que en el Document, document se utiliza para seleccionar los elementos. Los elementos son las etiquetas html
lo que no entiendo porque no se puede usar document.getAttribute de verdad no entiendo cuando usar document y lo del element no lo termino de comprender he vuelto a ver los vídeos pero no me queda claro estaba evitando la pregunta pero ya me rendí :c
document = es toda la estructura del documento html, y como bien dices los elementos, son las etiquetas
Me está gustando, vamos a ver que logramos con todo esto!!
Gracias Jon
Mucha suerte!
Buenas.
Una consulta. cuando intento usar un querySelector o un querySelectorAll desde un archivo JS, estos salen como NULL pero si lo hago directamente sobre el archivo html usando un estos funcionan y muestran los elementos que les pido. En el mismo archivo JS tengo los getElementsByTagName y demas, y funcionan. ¿Alguien tiene alguna idea de porque pasa esto?
Sube tu código a un codepen o codesandbox para mirar
@@jonmircha probando en codepen funcionan, creo que puede ser algo de Atom, voy a probar con otro editor. Gracias por la ayuda.
2:46 pura magia, no sabia de eso. Gracias!
👋🏻😉
👏👏👏 🙏🙏🙏
👋🏻😉
🤗🤗🤗🤗🤗
😉👋🏻
10/10
👋🏻😉
en esta clase despeje muchas dudas que tenia al respecto con este tema .gracias profe y feliz navidad
Con mucho gusto
Excelente video, Jon! muchas gracias!
Con gusto
Excelente vídeo!
Hola Jon , Increible tu curso desde que lo empeze no pare de aprender,una consulta al terminar este curso podremos tener una salida laboral como javascript junior ?
Sí hay varios que han encontrado trabajo, lee los comentarios
Master! Excelente :) Gracias por la dedicación!
Gracias, saludos
Jon una pregunta, ojalá puedas verla pronto. ¿Me recomiendas en este punto ir a ver tu curso de HTML y CSS y después volver a este punto del curso?
Sé que podría seguirme y entender mucho, pero me da la impresión de que sí voy aprendo y vuelvo, la potenciación del curso será superior. Un abrazo y gracias por tu bondad. 🤟
Ya te has respondido tu mismo
@@jonmircha regresé después de hacer una maratón de HTML, CSS, flexbox y grid. Estuvieron increíbles esos cursos, aprendí muchísimo. ❤️
@@_germantonio_ los viste en 2 semanas XD vaya que fue una maratón
excente video gracias
😉👍🏻
excelente...
Hola Jon, descubrí tu canal esta semana y me gustó mucho. Quería saber cuál extensión(nombre en la sección de extensiones) emmet usas para escribir código más rápido? Sé que es emmet algo, pero hay muchos emmet jajaja. Gracias hermano!
Aquí mi configuración jonmircha.com/vscode
@@jonmircha No hay nada sobre la extensión emmet...
NO VScode lo trae integrado
Pero que grande Maestro
😉
Claro como el agua profe
😉👋🏻
Tengo una duda profe! En el video mencionas sobre "getElementById", "getElementsByTagName", "getElementsByClassName" tambien "getElementsByName".
Incluso despues , nos enseñas que con el querySelector podemos seleccionar clases, id y etiquetas... Es decir, podemos hacer la misma funcion que los metodos mencionados arriba, pero ¿como seleccionamos los atributos, como por ejemplo el atributo "name" (que anteriormente utilizabamos "getElementsByName")?
pues especificas el valor que tiene el tag en su atributo name, por ej seria getElementsByName("correo")
@@jonmircha Bien, crei que habia alguna manera de utilizarlo por medio del querySelector
Por querySelector sería querySelector("[name='correo']") por que esto [name='correo'] es un selector de atributos en css
@@jonmircha Muchisimas gracias por responderme Jon! Saludos desde Argentina-Cordoba
jon sos re capo gracias
🙂👍
gracias por tanto Jooon
De nada 😊
Mereces cientos de miles de visualizaciones!!!
😉🙌
Profesor!!!!!!!!!
😉👋🏻
Gracias Jon, siempre el mejor
😉🙌🏻
Jon, lo haz explicado de manera magistral. No puedo creer que en el curso pago que estoy haciendo en Coderhouse sea tan probre comparado con este curso sin cargo que tiene un nivel impresionante. Dios te bendiga querido Jon!! Seguiré colaborando y compartiendo tu canal con la mayor cantidad de personas que esté a mi alcance. Abrazo!
🥰🙌🏻
Hola Jon, tengo un pequeño problema al levantar el servidor de visual (LiveServer), al pulsar "Open with live server" me sale error en el navegador(crome), me redirecciona al puerto 5500, pero en el navegador me sale "Esta pagina no funciona 127.0.0.1 no ha enviado ningún dato. ERR_EMPTY_RESPONSE"
Reinicia el VSCode o reinstala el plugin
@@jonmircha Hice lo que me pediste Jon, pero aun sigue dando el mismo problema :(
Revisa que tu maquina no tenga ocupado por otro servicio ese puerto
@@jonmircha Disculpa mi ignorancia Jon, llevo poco tiempo en este mundo de la programación, pero como saber si hay otro servicio ocupando ese puerto y como solucionarlo...??
@@frankbernales8778 @jonmircha tengo el mismo problema
Bendiciones y mil gracias por le contenido 🧙♂️🧙♂️🧙♂️
👍🏻😀
Gran valor Jon excelente explicación!!!
Gracias!
Es arte
👋🏻😉
¡Gracias!
🥰🙌🏻
Jon, porque hay que poner el script en donde llamamos al dom.js abajo del codigo html?
Por que los scripts son bloqueantes y lo correcto es que se invoquen al final del código HTML
jon, comparto tu curso porque esta muy bien explicado y detallado.
Lo que sí una sugerencia 15:32 por ejemplo, pasa muy seguido que el volumen satura, en el futuro utilizar algun software que filtre un poco no seria mala idea, aparte es simple y aumentaria la calidad mucho.
Abrazo Profe!
Gracias :)
Mannn qué buen video, he visto y leído mucho acerca del tema pero nunca me quedó tan clarooo, GRACIAS hermano Jonatan Mircha, te admiro un montón!
;)
super bueno el material
Gracias, comparte para llegar a más gente :)
Hola Jonathan, primero muchas gracias por este curso tan valioso, ha valido la pena cada minuto. En segundo lugar quiero preguntarte que tema, y que tipo de fuente usas en Visual Studio Code, es que el mio no se ve tan bonito jajajaja. :D
Aquí mi configutación 😉👍🏻 jonmircha.com/vscode
@@jonmircha Gracias 😁
10:05 Se le salio el JQuery al Mircha, con esa forma de tomar la clase!
🤣🤭
Excelente recurso, mil gracias !!!!!!!!!!!!
Con mucho gusto
Jon, muy inspiradora la clase
;)
Muy buen curso Jon! Muchas gracias.
Con mucho gusto
JQUERY YA MURIÓ ?
Puedes escuchar mi video al respecto th-cam.com/video/AJ8YtVD3764/w-d-xo.html
Gracias Jon!
Si es para proyectos de aca al futuro, esta mas muerto que el amor de ella por mi (?
Si es para proyectos de aca al pasado (para mantenimiento), todavia sigue vivo.
Explicacion mas simple que esa imposible jajaja
@@juancruzledesma5693 la verdad es cruda amigo jajaja
!! muchas vueltas para decir algo, estaría mucho mejor si vas directo al grano!!
¯\_(ツ)_/¯
agradece que se toma su tiempo para compartir sus conocimientos.
Gracias profe!