Curso JavaScript: 66. DOM: Texto y HTML -

En este video te enseño como funciona el texto y #HTML en el #API del #DOM de #JavaScript.
💛 Aprende JavaScript aprendejavascript.org/
📖 Mis notas sobre JavaScript jonmircha.com/javascript
📖 Mis notas sobre ECMAScript jonmircha.com/ecmascript
📖 Mis notas sobre JavaScript Asíncrono jonmircha.com/javascript-asin...
📖 Mis notas sobre JSON jonmircha.com/json
📖 Mis notas sobre el DOM jonmircha.com/dom
📦 Códigos: github.com/jonmircha/youtube-js
🔔 Suscríbete al canal kzread.info?sub_con... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/jonmircha
📫 Suscríbete a mi lista de correo tinyletter.com/jonmircha/

Пікірлер: 142

  • @rafaelrodriguezcalvente8482
    @rafaelrodriguezcalvente84824 жыл бұрын

    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

    @eribertmarquez452

    3 жыл бұрын

    muchas gracias, me sirvió para seguir el tutorial

  • @Fhrenheit

    @Fhrenheit

    3 жыл бұрын

    Gracias buen hombre

  • @elfegomelgar

    @elfegomelgar

    3 жыл бұрын

    Gracias extraño, se ha ganado una cerveza

  • @benjaminmercau5016

    @benjaminmercau5016

    3 жыл бұрын

    Que persona del bien jaja Muchas gracias !!

  • @alexdurand5287

    @alexdurand5287

    2 жыл бұрын

    Heroe sin capa

  • @angelmgl8137
    @angelmgl81373 жыл бұрын

    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

    @jonmircha

    3 жыл бұрын

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

  • @PedroChuc

    @PedroChuc

    3 жыл бұрын

    me pasaba lo mismo, saludos

  • @sebasc2232

    @sebasc2232

    Жыл бұрын

    Despertaste el sharingan

  • @dicylowma5064
    @dicylowma50644 жыл бұрын

    Oye Jonathan por favor has un curso react js

  • @TUTEmateo
    @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

    @jonmircha

    Жыл бұрын

    👋🏻😉

  • @ivantg4572
    @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

    @jonmircha

    Жыл бұрын

    🥰🙌🏻

  • @ivanrodriguez9858
    @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

    @jonmircha

    Жыл бұрын

    😉👋🏻👏🏻👏🏻

  • @davidaguirre5370
    @davidaguirre537011 ай бұрын

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

  • @jonmircha

    @jonmircha

    11 ай бұрын

    👋🏻😉

  • @marcelogomezgrois7843
    @marcelogomezgrois78434 жыл бұрын

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

  • @VanHelsing2021

    @VanHelsing2021

    2 жыл бұрын

    concuerdo pienso que mejor que EDteam y Platzi

  • @Mariajulia-yc1tr

    @Mariajulia-yc1tr

    2 жыл бұрын

    voy pagando dos bastante caros y este sigue superandolo

  • @ManuelMartinez-oe1ov
    @ManuelMartinez-oe1ov Жыл бұрын

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

  • @eduardomegoguevara3181
    @eduardomegoguevara31812 жыл бұрын

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

  • @jonmircha

    @jonmircha

    2 жыл бұрын

    🤓👍🏻

  • @hernansanabria9685
    @hernansanabria96857 ай бұрын

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

  • @jonmircha

    @jonmircha

    7 ай бұрын

    Gracias, saludos👋🏻😉

  • @carlosalbertousugamartinez3199
    @carlosalbertousugamartinez31992 жыл бұрын

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

  • @jonmircha

    @jonmircha

    2 жыл бұрын

    Excelente!

  • @carlosjavierorozco8418
    @carlosjavierorozco8418 Жыл бұрын

    Aportas muchísimo valor. Mil gracias.

  • @jonmircha

    @jonmircha

    Жыл бұрын

    Gracias por comentar

  • @cumpaMira
    @cumpaMira2 жыл бұрын

    Gracias profe!

  • @atcastillo618
    @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

    @jonmircha

    Жыл бұрын

    😉👋🏻

  • @danielfabiani4468
    @danielfabiani4468 Жыл бұрын

    Muchas gracias por esta semana. Saludos...

  • @jonmircha

    @jonmircha

    Жыл бұрын

    Un saludo

  • @Wiiiiizard
    @Wiiiiizard Жыл бұрын

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

  • @jonmircha

    @jonmircha

    Жыл бұрын

    Gracias por comentar

  • @Juicio87
    @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

    @jonmircha

    Жыл бұрын

    😉👍🏻

  • @johnlopez7684
    @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

    @jonmircha

    Жыл бұрын

    👋🏻😉

  • @Juicio87

    @Juicio87

    Жыл бұрын

    Muy buen aporte, me lo apunto!

  • @danielfabiani4468

    @danielfabiani4468

    Жыл бұрын

    Gracias.

  • @VanHelsing2021
    @VanHelsing20212 жыл бұрын

    test

  • @jonmircha

    @jonmircha

    2 жыл бұрын

    👍🏻

  • @williamalexanderpineda6098
    @williamalexanderpineda6098 Жыл бұрын

    Excelente vídeo

  • @carlesbautista8293
    @carlesbautista82933 жыл бұрын

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

  • @jonmircha

    @jonmircha

    3 жыл бұрын

    Excelente!

  • @aldairmarcelo5432
    @aldairmarcelo54322 жыл бұрын

    Sigo en el camino! Gracias Jon!

  • @jonmircha

    @jonmircha

    2 жыл бұрын

    Excelente!

  • @agust-x1768
    @agust-x1768 Жыл бұрын

    alert('hola'); ta bien

  • @estebanoctaviopavezllanca2385
    @estebanoctaviopavezllanca23853 жыл бұрын

    Gracias profe

  • @jonmircha

    @jonmircha

    3 жыл бұрын

    Con mucho gusto

  • @alexdavidhurtadoyeneris7116
    @alexdavidhurtadoyeneris71162 жыл бұрын

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

  • @jonmircha

    @jonmircha

    2 жыл бұрын

    Hola, muchas gracias

  • @johnherrera5913
    @johnherrera59132 жыл бұрын

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

  • @jonmircha

    @jonmircha

    2 жыл бұрын

    Con mucho gusto

  • @giovannyvanegas88
    @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

    @jonmircha

    Жыл бұрын

    👋🏻😉

  • @industriasocegueradisenand5315
    @industriasocegueradisenand5315 Жыл бұрын

    Hola me parece excelente la forma en que explicas

  • @jonmircha

    @jonmircha

    Жыл бұрын

    Hola, muchas gracias

  • @braianrico4422
    @braianrico44222 жыл бұрын

    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

    @jonmircha

    2 жыл бұрын

    😉🙌🏻

  • @geovannyandersonescobarhen7876
    @geovannyandersonescobarhen78762 жыл бұрын

    Buen curso Jon!

  • @jonmircha

    @jonmircha

    2 жыл бұрын

    😉👍🏻

  • @timawid
    @timawid11 ай бұрын

    🙌✅✅👏

  • @helipalacio8772
    @helipalacio87728 ай бұрын

    👏👏👏 🙏🙏🙏

  • @jonmircha

    @jonmircha

    8 ай бұрын

    👋🏻😉

  • @felipecruz3336
    @felipecruz33364 жыл бұрын

    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

    @jonmircha

    4 жыл бұрын

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

  • @alejandroquinonescaicedo8
    @alejandroquinonescaicedo82 жыл бұрын

    Hello

  • @jonmircha

    @jonmircha

    2 жыл бұрын

    👍🏻

  • @matiasgomez9416
    @matiasgomez94163 жыл бұрын

    // 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.

  • @leonardoprone5967
    @leonardoprone59672 жыл бұрын

    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

    @jonmircha

    2 жыл бұрын

    Sí y sí

  • @leonardoprone5967

    @leonardoprone5967

    2 жыл бұрын

    @@jonmircha Gracias por responder, Jon!

  • @reactivoJS
    @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!

  • @justin.script
    @justin.script Жыл бұрын

    Hola Jon, aportas mucho valor, muchas gracias y bendiciones

  • @jonmircha

    @jonmircha

    Жыл бұрын

    Hola, muchas gracias👋🏻😉

  • @joelleiva6952
    @joelleiva69522 жыл бұрын

    Gran videoComo SIEMPRE!!!

  • @jonmircha

    @jonmircha

    2 жыл бұрын

    👍🏻🤓

  • @juandiegooliverosvasquez1798
    @juandiegooliverosvasquez17982 жыл бұрын

    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

    @jonmircha

    2 жыл бұрын

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

  • @jonmircha

    @jonmircha

    2 жыл бұрын

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

  • @juandiegooliverosvasquez1798

    @juandiegooliverosvasquez1798

    2 жыл бұрын

    @@jonmircha Si funcionó, gracias.

  • @brianbaez2637
    @brianbaez2637 Жыл бұрын

    🐯

  • @tomyfernandez8733
    @tomyfernandez87332 жыл бұрын

    probando el chat de youtube xd

  • @jonmircha

    @jonmircha

    2 жыл бұрын

    🤭

  • @miguelperezmerino3995
    @miguelperezmerino39952 жыл бұрын

    probando xd

  • @Muelas38
    @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

    @Muelas38

    Жыл бұрын

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

  • @jonmircha

    @jonmircha

    Жыл бұрын

    Puedes aprender node o php a la par

  • @michae301
    @michae3012 жыл бұрын

    hola mundo

  • @jonmircha

    @jonmircha

    2 жыл бұрын

    👋🏻

  • @michae301

    @michae301

    2 жыл бұрын

    @@jonmircha jaja no funciono :(

  • @ac.developer4459
    @ac.developer44593 жыл бұрын

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

  • @jonmircha

    @jonmircha

    3 жыл бұрын

    😉

  • @Jaimedaviddaza
    @Jaimedaviddaza2 жыл бұрын

    InnnerHTML en un chat en línea: XSS Vulnerable

  • @fernandoromero5283
    @fernandoromero52833 жыл бұрын

    Hola a todos

  • @juancruzledesma5693
    @juancruzledesma56933 жыл бұрын

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

  • @jonmircha

    @jonmircha

    3 жыл бұрын

    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

    @juancruzledesma5693

    3 жыл бұрын

    Gracias profe!

  • @nelosanjines6463
    @nelosanjines64634 жыл бұрын

    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

    @jonmircha

    4 жыл бұрын

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

  • @user87546
    @user87546 Жыл бұрын

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

  • @jonmircha

    @jonmircha

    Жыл бұрын

    🤣🤣

  • @STEVENMETAL100
    @STEVENMETAL100 Жыл бұрын

    hola

  • @jonmircha

    @jonmircha

    Жыл бұрын

    👋🏻😉

  • @alphaphantom3846
    @alphaphantom38463 жыл бұрын

    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

    @alphaphantom3846

    3 жыл бұрын

    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

    @braianrico4422

    2 жыл бұрын

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

  • @luchogrz273

    @luchogrz273

    Жыл бұрын

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

  • @everything-do9si
    @everything-do9si3 жыл бұрын

    Habrá curso de React??

  • @jonmircha

    @jonmircha

    3 жыл бұрын

    En 2021

  • @guillermorivadeneira385

    @guillermorivadeneira385

    3 жыл бұрын

    @@jonmircha Prometiste y cumpliste, bien por ti Jon

  • @davidcardenas7737
    @davidcardenas77374 жыл бұрын

    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

    @jonmircha

    4 жыл бұрын

    Supongo, no la he revisado

  • @davidcardenas7737

    @davidcardenas7737

    4 жыл бұрын

    @@jonmircha pero cuando la uso era gratis??

  • @Charly200672
    @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...

  • @deivymorales1
    @deivymorales1 Жыл бұрын

    a mi innerHTML me aparece totalmente diferente

  • @xdddddd8387
    @xdddddd83872 жыл бұрын

    Hola mundo como estas2

  • @edilymora125
    @edilymora1253 жыл бұрын

    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

    @jonmircha

    3 жыл бұрын

    Mira este video, aquí veras la utilidad de outerHTML kzread.info/dash/bejne/dnuImLJ-lLmpiLw.html

  • @wilsonandia8290

    @wilsonandia8290

    3 жыл бұрын

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

  • @angelgamersoft2442
    @angelgamersoft24422 жыл бұрын

    Hola :3

  • @jonmircha

    @jonmircha

    2 жыл бұрын

    😉

  • @sebaskahn
    @sebaskahn3 жыл бұрын

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

  • @jonmircha

    @jonmircha

    3 жыл бұрын

    jajajaja es vdd clarito oí la tarareada de esa rola

  • @martingalenda877
    @martingalenda8772 жыл бұрын

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

  • @jonmircha

    @jonmircha

    2 жыл бұрын

    😅

  • @elweonweandolaweafome
    @elweonweandolaweafome Жыл бұрын

    El DOM nos prestan tantas cosas para hacer cositas

  • @jonmircha

    @jonmircha

    Жыл бұрын

    😉

  • @heimancastro1954
    @heimancastro1954 Жыл бұрын

    react.Fragmito 😄😄😄😄

  • @jonmircha

    @jonmircha

    Жыл бұрын

    😅