Curso JavaScript: 66. DOM: Texto y HTML -

[@rafaelrodriguezcalvente8482]

let text = ` El Modelo de Objetos del Documento (DOM - Document Object Model ) es un API para documentos HTML y XML. Éste provée una representación estructural del documento, permitiendo modificar su contenido y presentación visual mediante código JS. El DOM no es parte de la especificación de JavaScript, es una API para los navegadores. `

[@eribertmarquez452]

muchas gracias, me sirvió para seguir el tutorial

[@Fhrenheit]

Gracias buen hombre

[@elfegomelgar]

Gracias extraño, se ha ganado una cerveza

[@benjaminmercau5016]

Que persona del bien jaja Muchas gracias !!

[@alexdurand5287]

Heroe sin capa

[@angelmgl8137]

Lo mejor de este curso es que lo modularizaste tan bien que tantas propiedades y métodos quedan grabados en la mente gracias a la estrecha vinculación que forman en cada video. Debo decir que todas las propiedades que mencionaste en este video ya las conocía perfectamente, pero estaban flotando en mi mente sin relación alguna, lo que me dificultaba recordarlas en momentos de trabajo. Ahora mismo he creado fuertes conexiones en mi mente, se han fortalecido mis conocimientos, y todo gracias al orden de la información. Lo mismo me lleva pasando con los últimos 7 videos, he aprendido cosas nuevas pero la mayoría ya las sabía, solo que estaban flotando en la nada. Lamento tanto no haber encontrado este curso en mis inicios, me hubiera ahorrado muchos dolores de cabeza, pero enhorabuena por todos los compañeros que empiecen aprendiendo aquí, el mejor curso de Javascript que he conocido.

[@jonmircha]

Ya estas viendo la Matrix de JS 🤗💛 comparte para llegar a más personas

[@PedroChuc]

me pasaba lo mismo, saludos

[@sebasc2232]

Despertaste el sharingan

[@Michael97ma]

Oye Jonathan por favor has un curso react js

[@TUTEmateo]

Jon vengo haciendo todos los videos del curso, hasta ahora no había dejado mi marca para agradecerte todo lo que estoy aprendiendo. Es increible la cantidad de información que nos das ! Voy a hacer todos los cursos, seguí asi

[@jonmircha]

👋🏻😉

[@ivantg4572]

Honestamente no se que piensa youtube porque este curso y otro que no quiero escribir porque no quiero hacerle publicidad son los mejores y lo digo con conocimiento de causa porque he estudiado muchos cursos en youtube sobre JS y honestamente estos dos son los mejores y me parece increíble que nos pongan a comernos cursos tan malos por el simple hecho de que tienen mas comentarios o likes así no debería ser el algoritmo porque honestamente este curso tuyo tiene mas calidad y esta mejor explicado que los que están en primer lugar . chicos si alguien le este comentario dejemos muchos comentarios todos los que veamos el video para que las personas que quieran aprender aprendan con los cursos que son y no pierdan tiempo viendo cursos que honestamente no son tan buenos

[@jonmircha]

🥰🙌🏻

[@davidaguirre5370]

Año 2023 y tus vídeos siguen superando por mucho a un montón de cursos pagos!!! Muchas gracias Jon!!!

[@jonmircha]

👋🏻😉

[@ivanrodriguez9858]

Gracias hermano por el conocimiento que compartes, hoy me aceptaron para mi primer empleo en desarrollo web Fronnted y gran parte de que todo saliera bien en las pruebas es por ver tur cursos, gracias infinitas, te deseo lo mejor y yo aseguir mi ritmo de estudio💪, saludos.

[@jonmircha]

😉👋🏻👏🏻👏🏻

[@atcastillo618]

Hola! Vengo del futuro 🤗 La verdad da placer aprender con alguien que sabe y que disfruta lo que hace. Es maravillosa la forma que tenés de explicar! Abarcas muchos conceptos de manera clara y ordenada, aprender con vos es divertido. Solo queda agredecer por tu tiempo, paciencia y dedicación. Saludos desde Argentina!

[@jonmircha]

😉👋🏻

[@carlosalbertousugamartinez3199]

Probando el chat si inyecta el contenido como HTML =) =) Excelente curso cada día aprendo más y más

[@jonmircha]

Excelente!

[@hernansanabria9685]

sept 11 1969**Nov 14 2023 gracias excelente curso felicidades John Mircha

[@jonmircha]

Gracias, saludos👋🏻😉

[@marcelogomezgrois7843]

Vamos genio... el mejor curso de Javascript en youtube

[@VanHelsing2021]

concuerdo pienso que mejor que EDteam y Platzi

[@Mariajulia-yc1tr]

voy pagando dos bastante caros y este sigue superandolo

[@ManuelMartinez-oe1ov]

El Modelo de Objetos del Documento (DOM - Document Object Model ) es un API para documentos HTML y XML.

[@carlosjavierorozco8418]

Aportas muchísimo valor. Mil gracias.

[@jonmircha]

Gracias por comentar

[@eduardomegoguevara3181]

Brutal, ya estoy en este video, ahora toca repasar desde la 60 🤙, vamos viendo mas cosas

[@jonmircha]

🤓👍🏻

[@danielfabiani4468]

Muchas gracias por esta semana. Saludos...

[@jonmircha]

Un saludo

[@GABRIELDIAZ-gx1ed]

Llegue del futuro para cMbiar mi presente. Gracias Jon eres el mejor amigo del Pasado

[@jonmircha]

👋🏻😉

[@alexdavidhurtadoyeneris7116]

Estaba viendo Facebook, tus cursos son de los más recomendados te felicito.

[@jonmircha]

Hola, muchas gracias

[@johnlopez7684]

Jon me gusta este contenido que pones, es muy interesante y se encuentra bien explicado. Aprovecho para aportar algo pequeño con respecto a innerText y textContent ya que ha dia de hoy 21 / 07 / 2022 tienen diferencias entre si. La diferencia radica en el momento de capturar el contenido del elemento html especificado ya que al utilizar textContent se obtendrá el contenido de todos los hijos del nodo como una sola cadena de texto, mientras que con innerText no, esto es importante en algunos casos como por ejemplo: Supongamos que tenemos una tabla con 2 o mas columnas (col1 | col2) y deseamos obtener el contenido por filas, si utilizáramos textContent obtendriamos como resultado algo asi: "contenidoCol1contenidoCol2", mientras que con innerText obtendriamos algo asi "contenidoCol1 \t contenidoCol2" lo cual nos permitiria hacer un split("\t") para obtener un array donde el contenido de cada celda estaria debidamente separado, es decir algo como esto ["contenidoCol1", "contenidoCol2"], lo cual seria más manejable. Por lo demás solo me resta decir que estos cursos que compartes valen oro y sinceramente te agradezco por poner tanto empeño en cada uno de tus videos. Muchas gracias.

[@jonmircha]

👋🏻😉

[@Juicio87]

Muy buen aporte, me lo apunto!

[@danielfabiani4468]

Gracias.

[@Wiiiiizard]

🧙‍♂Muchas gracias, muy buen curso!!!

[@jonmircha]

Gracias por comentar

[@giovannyvanegas88]

Siguiendo el orden del curso y por fin logre entender que es innerHtml y textContent, ya que lo he visto en muchos proyectos. Gracias por este conocimiento maestro Jon.

[@jonmircha]

👋🏻😉

[@VanHelsing2021]

test

[@jonmircha]

👍🏻

[@agust-x1768]

alert('hola'); ta bien

[@johnherrera5913]

Master! gracias por darnos una oportunidad de mejorar, con tus conocimientos!!

[@jonmircha]

Con mucho gusto

[@industriasocegueradisenand5315]

Hola me parece excelente la forma en que explicas

[@jonmircha]

Hola, muchas gracias

[@williamalexanderpineda6098]

Excelente vídeo

[@Juicio87]

Aquí se puede ver el claro ejemplo de por qué ponemos la etiqueta script abajo del todo antes de cerrar body; si probáis a ponerla arriba, al comienzo de body nada del código js afecta al documento html; aunque pueda resultar obvio es bueno ver cómo funciona el flujo del programa...en React es fundamental.

[@jonmircha]

😉👍🏻

[@aldairmarcelo5432]

Sigo en el camino! Gracias Jon!

[@jonmircha]

Excelente!

[@angelicagarzon9726]

a ver

[@braianrico4422]

Buenos días desde el futuro jajaja Jon mil gracias por tu tiempo, de verdad que tu forma de enseñar motiva mucho... Este video en otro lado demorara como máximo 5 min, y tu usas la plastilina pero además no llegamos a aburrirnos. Bendiciones 🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

😉🙌🏻

[@carlesbautista8293]

Estoy muy contento con este curso Jonathan, gracias!!!!!

[@jonmircha]

Excelente!

[@alejandroquinonescaicedo8]

Hello

[@jonmircha]

👍🏻

[@leonardoprone5967]

Excelente video, Jon. Una duda: al reemplazar directamente el elemento HTML original por el otro texto, usando .outerHTML, se pierde para siempre esa etiqueta y su contenido?. Otra consulta: se puede reemplazar una etiqueta, por ejemplo por otra que no sea , es decir, una , o , etc?

[@jonmircha]

Sí y sí

[@leonardoprone5967]

@@jonmircha Gracias por responder, Jon!

[@felipecruz3336]

Ahora si se puso interesante el curso, lo necesitaba porque estoy desarrollando un proyecto y no tengo mucho tiempo para abarcar todos los conceptos y temas de este curso, una disculpa Jon si no te gusto mi comentario de la critica

[@jonmircha]

Al contrario te di mi punto de vista pensando en todos los tipos de personas novatos y experimentados :)

[@estebanoctaviopavezllanca2385]

Gracias profe

[@jonmircha]

Con mucho gusto

[@matiasgomez9416]

// 66. DOM: Texto y HTML const $whatIsDOM = document.getElementById("que-es"); let text = ` El Modelo de Objetos del Documento (DOM - Document Object Model ) es un API para documentos HTML y XML. Éste provée una representación estructural del documento, permitiendo modificar su contenido y presentación visual mediante código JS. El DOM no es parte de la especificación de JavaScript, es una API para los navegadores. ` $whatIsDOM.innerText = text; $whatIsDOM.textContent = text; // representa el contenido de texto de un nodo y sus dencendientes. $whatIsDOM.innerHTML = text; // devuelve o establece la sintaxis HTML describiendo los descendientes del elemento. Al establecerse se reemplaza la sintaxis HTML del elemento por la nueva. $whatIsDOM.outerHTML = text; // Puede ser asignado para reemplazar el elemento por los nodos resultantes de examinar de la cadena proporcionada.

[@geovannyandersonescobarhen7876]

Buen curso Jon!

[@jonmircha]

😉👍🏻

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@juandiegooliverosvasquez1798]

Hola Jon. Gracias por el vídeo. Una consulta. ¿Qué comando usas para mantener el mismo número de línea código cuando das enter?

[@jonmircha]

😮 no lo se, sólo doy enter pero te paso mi config de VSCode jonmircha.com/vscode

[@jonmircha]

😮 no lo se, sólo doy enter pero te paso mi config de VSCode jonmircha.com/vscode

[@juandiegooliverosvasquez1798]

@@jonmircha Si funcionó, gracias.

[@timawid]

🙌✅✅👏

[@user87546]

1:09 What is DOM? Oh baby, don't hurt me Don't hurt me No more

[@jonmircha]

🤣🤣

[@JuanVelascoGarcia]

Texto en negrita

[@jonmircha]

👋🏻😉

[@joelleiva6952]

Gran videoComo SIEMPRE!!!

[@jonmircha]

👍🏻🤓

[@justin.script]

Hola Jon, aportas mucho valor, muchas gracias y bendiciones

[@jonmircha]

Hola, muchas gracias👋🏻😉

[@Muelas38]

Profesor mircha una pregunta, puedo ir aprendiendo Node.js mientras sigo con el curso, o primero termino este curso y despues si me voy con node.js. Gracias :)

[@Muelas38]

O que lenguaje para backend seria bueno aprender , porfavor y gracias :)

[@jonmircha]

Puedes aprender node o php a la par

[@juancruzledesma5693]

¿seria mala practica utilizar "outerHTML" para todo en vez de "innerHTML" y "textContent"?

[@jonmircha]

cada uno debe utilizarse para su objetivo, outer te va a reemplazar el nodo, mientras que los otros 2 trabajan con lo interno del nodo seleccionado, en los ejercicios de esta sección entenderás cuando usar uno y cuando los otros

[@juancruzledesma5693]

Gracias profe!

[@michae301]

hola mundo

[@jonmircha]

👋🏻

[@michae301]

@@jonmircha jaja no funciono :(

[@brianbaez2637]

🐯

[@Jaimedaviddaza]

InnnerHTML en un chat en línea: XSS Vulnerable

[@fernandoromero5283]

Hola a todos

[@reactivoJS]

Lo malo del outer es que en el DOM ya no existe ese identificador "que-es", eso en React no pasa, pero viene bien saberlo!

[@miguelperezmerino3995]

probando xd

[@ac.developer4459]

*outerHTML*, no lo conocía todavía

[@jonmircha]

😉

[@tomyfernandez8733]

probando el chat de youtube xd

[@jonmircha]

🤭

[@everything-do9si]

Habrá curso de React??

[@jonmircha]

En 2021

[@guillermorivadeneira385]

@@jonmircha Prometiste y cumpliste, bien por ti Jon

[@nelosanjines6463]

Exelente, buen tutorial... Jon me aparecio un error al estar trabajado con javascript no se como solucionarlo, trato de trabajar con javascript pero en la consola de firefox me sale el siguiente error: El recurso de “127.0.0.1:5500/js/script.js” fue bloqueado debido a una discordancia del tipo MIME (“text/html”) (X-Content-Type-Options: nosniff). no logre darle solucion y me plante en esto. Esperando una manita, pues para seguir dandole a la practica....Saludos.

[@jonmircha]

Prueba en otro navegador, por que no tengo idea o revisa tus configuraciones de firefox

[@alphaphantom3846]

al hacer lo que el profe explica me produce este error no doy como solucionar 🤯alguna idea de como solucionar ? gracias. Uncaught TypeError: Cannot set property 'innerHTML' of null at dom.js:438

[@alphaphantom3846]

olvídenlo jaajajaj... esto siempre nos va a pasar a los que estamos de neófitos en este maravilloso mundo de la programación... el error estaba en un - que no había colocado en el id, era "que-es" y yo lo tenia "que es" y al pasarlo por el document.getElementById("que-es") pues me daba el error... 😅😅😅😅

[@braianrico4422]

@@alphaphantom3846 jajajaj tambien perdi un rato buscando y comparando el codigo con el de Jon 🤣🤣🤣

[@luchogrz273]

@@alphaphantom3846 Gracias a tu error encontre el mio en el id (yo tenia el "que-es" en mayusculas. Exitos!

[@sebaskahn]

$whatIsDOM Oh baby, don't hurt me Don't hurt me No more... ♪ ♫ ♩ ♪ ♬

[@jonmircha]

jajajaja es vdd clarito oí la tarareada de esa rola

[@Charly200672]

hola...(method) Document.getElementById(elementId: string): HTMLElement | null Returns a reference to the first object with the specified value of the ID attribute. @param elementId - String that specifies the ID value. no me funciona ... alguien q me pueda ayudar?mil gracias y muy agradecido al gran maestro...

[@STEVENMETAL100]

hola

[@jonmircha]

👋🏻😉

[@xdddddd8387]

Hola mundo como estas2

[@bartreaccion]

a mi innerHTML me aparece totalmente diferente

[@davidcardenas7737]

profe el api fixe.io cuando usted la uso en el curso de vuejs era paga?? , la fui a usar y nada jajajajajja . como que toca pagar cuando uno le manda la base y le responde a cuanto equivale en los diferentes pesos . pero eso antes era gratis???

[@jonmircha]

Supongo, no la he revisado

[@davidcardenas7737]

@@jonmircha pero cuando la uso era gratis??

[@edilymora125]

NO ME GUSTA outerHTML!!!! 😑 Después inyectar el texto con esa propiedad, intente aplicar estilo a ese texto, accediendo a él mediante $whatIsDOM, así: $whatIsDOM.style.setProperty("color", "pink") Y NO LO HIZO. Al usar la propiedad outerHTML para inyectar texto a la $tag accedida, luego no podremos usar la misma $tag para afectar ese texto inyectado, porque reemplaza la $tag, por las tags html renderizadas del texto inyectado. ¿Entonces profesor, como accedo a esas nuevas tags? Si nacen sin Id, ni selectores evidentes. Saludos!! 🚀

[@jonmircha]

Mira este video, aquí veras la utilidad de outerHTML kzbin.info/www/bejne/eni3Z4N7mbt2jrs

[@wilsonandia8290]

Es xq ya no existe esa etiqueta o referencia ya que lo estas reemplazando con outerHTML

[@angelgamersoft2442]

Hola :3

[@jonmircha]

😉

[@martingalenda]

Que se sentirá ser el mejor profesor de habla hispana?

[@jonmircha]

😅

[@elweonweandolaweafome]

El DOM nos prestan tantas cosas para hacer cositas

[@jonmircha]

😉

[@heimancastro1954]

react.Fragmito 😄😄😄😄

[@jonmircha]

😅