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
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
3 жыл бұрын
muchas gracias, me sirvió para seguir el tutorial
@Fhrenheit
3 жыл бұрын
Gracias buen hombre
@elfegomelgar
3 жыл бұрын
Gracias extraño, se ha ganado una cerveza
@benjaminmercau5016
3 жыл бұрын
Que persona del bien jaja Muchas gracias !!
@alexdurand5287
2 жыл бұрын
Heroe sin capa
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
3 жыл бұрын
Ya estas viendo la Matrix de JS 🤗💛 comparte para llegar a más personas
@PedroChuc
3 жыл бұрын
me pasaba lo mismo, saludos
@sebasc2232
Жыл бұрын
Despertaste el sharingan
Oye Jonathan por favor has un curso react js
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
Жыл бұрын
👋🏻😉
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
Жыл бұрын
🥰🙌🏻
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
Жыл бұрын
😉👋🏻👏🏻👏🏻
Año 2023 y tus vídeos siguen superando por mucho a un montón de cursos pagos!!! Muchas gracias Jon!!!
@jonmircha
11 ай бұрын
👋🏻😉
Vamos genio... el mejor curso de Javascript en youtube
@VanHelsing2021
2 жыл бұрын
concuerdo pienso que mejor que EDteam y Platzi
@Mariajulia-yc1tr
2 жыл бұрын
voy pagando dos bastante caros y este sigue superandolo
El Modelo de Objetos del Documento (DOM - Document Object Model ) es un API para documentos HTML y XML.
Brutal, ya estoy en este video, ahora toca repasar desde la 60 🤙, vamos viendo mas cosas
@jonmircha
2 жыл бұрын
🤓👍🏻
sept 11 1969**Nov 14 2023 gracias excelente curso felicidades John Mircha
@jonmircha
7 ай бұрын
Gracias, saludos👋🏻😉
Probando el chat si inyecta el contenido como HTML =) =) Excelente curso cada día aprendo más y más
@jonmircha
2 жыл бұрын
Excelente!
Aportas muchísimo valor. Mil gracias.
@jonmircha
Жыл бұрын
Gracias por comentar
Gracias profe!
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
Жыл бұрын
😉👋🏻
Muchas gracias por esta semana. Saludos...
@jonmircha
Жыл бұрын
Un saludo
🧙♂Muchas gracias, muy buen curso!!!
@jonmircha
Жыл бұрын
Gracias por comentar
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
Жыл бұрын
😉👍🏻
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.
test
@jonmircha
2 жыл бұрын
👍🏻
Excelente vídeo
Estoy muy contento con este curso Jonathan, gracias!!!!!
@jonmircha
3 жыл бұрын
Excelente!
Sigo en el camino! Gracias Jon!
@jonmircha
2 жыл бұрын
Excelente!
alert('hola'); ta bien
Gracias profe
@jonmircha
3 жыл бұрын
Con mucho gusto
Estaba viendo Facebook, tus cursos son de los más recomendados te felicito.
@jonmircha
2 жыл бұрын
Hola, muchas gracias
Master! gracias por darnos una oportunidad de mejorar, con tus conocimientos!!
@jonmircha
2 жыл бұрын
Con mucho gusto
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
Жыл бұрын
👋🏻😉
Hola me parece excelente la forma en que explicas
@jonmircha
Жыл бұрын
Hola, muchas gracias
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
2 жыл бұрын
😉🙌🏻
Buen curso Jon!
@jonmircha
2 жыл бұрын
😉👍🏻
🙌✅✅👏
👏👏👏 🙏🙏🙏
@jonmircha
8 ай бұрын
👋🏻😉
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
4 жыл бұрын
Al contrario te di mi punto de vista pensando en todos los tipos de personas novatos y experimentados :)
Hello
@jonmircha
2 жыл бұрын
👍🏻
// 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.
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
2 жыл бұрын
Sí y sí
@leonardoprone5967
2 жыл бұрын
@@jonmircha Gracias por responder, Jon!
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!
Hola Jon, aportas mucho valor, muchas gracias y bendiciones
@jonmircha
Жыл бұрын
Hola, muchas gracias👋🏻😉
Gran videoComo SIEMPRE!!!
@jonmircha
2 жыл бұрын
👍🏻🤓
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
2 жыл бұрын
😮 no lo se, sólo doy enter pero te paso mi config de VSCode jonmircha.com/vscode
@jonmircha
2 жыл бұрын
😮 no lo se, sólo doy enter pero te paso mi config de VSCode jonmircha.com/vscode
@juandiegooliverosvasquez1798
2 жыл бұрын
@@jonmircha Si funcionó, gracias.
🐯
probando el chat de youtube xd
@jonmircha
2 жыл бұрын
🤭
probando xd
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
hola mundo
@jonmircha
2 жыл бұрын
👋🏻
@michae301
2 жыл бұрын
@@jonmircha jaja no funciono :(
*outerHTML*, no lo conocía todavía
@jonmircha
3 жыл бұрын
😉
InnnerHTML en un chat en línea: XSS Vulnerable
Hola a todos
¿seria mala practica utilizar "outerHTML" para todo en vez de "innerHTML" y "textContent"?
@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
3 жыл бұрын
Gracias profe!
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
4 жыл бұрын
Prueba en otro navegador, por que no tengo idea o revisa tus configuraciones de firefox
1:09 What is DOM? Oh baby, don't hurt me Don't hurt me No more
@jonmircha
Жыл бұрын
🤣🤣
hola
@jonmircha
Жыл бұрын
👋🏻😉
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
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
2 жыл бұрын
@@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!
Habrá curso de React??
@jonmircha
3 жыл бұрын
En 2021
@guillermorivadeneira385
3 жыл бұрын
@@jonmircha Prometiste y cumpliste, bien por ti Jon
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
4 жыл бұрын
Supongo, no la he revisado
@davidcardenas7737
4 жыл бұрын
@@jonmircha pero cuando la uso era gratis??
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...
a mi innerHTML me aparece totalmente diferente
Hola mundo como estas2
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
3 жыл бұрын
Mira este video, aquí veras la utilidad de outerHTML kzread.info/dash/bejne/dnuImLJ-lLmpiLw.html
@wilsonandia8290
3 жыл бұрын
Es xq ya no existe esa etiqueta o referencia ya que lo estas reemplazando con outerHTML
Hola :3
@jonmircha
2 жыл бұрын
😉
$whatIsDOM Oh baby, don't hurt me Don't hurt me No more... ♪ ♫ ♩ ♪ ♬
@jonmircha
3 жыл бұрын
jajajaja es vdd clarito oí la tarareada de esa rola
Que se sentirá ser el mejor profesor de habla hispana?
@jonmircha
2 жыл бұрын
😅
El DOM nos prestan tantas cosas para hacer cositas
@jonmircha
Жыл бұрын
😉
react.Fragmito 😄😄😄😄
@jonmircha
Жыл бұрын
😅