No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Nuevo Curso Pr谩ctico de JavaScript

Nuevo Curso Pr谩ctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Escribiendo HTML desde JavaScript

11/26
Recursos

Aportes 20

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Yo agregu茅 un **replaceWith **y me sali贸 鈥渃onsidero que similar鈥, no s茅 si vaya a explotar mi compu, pero se los comparto:

const img = document.createElement('img');
img.setAttribute('src', 'https://i.pinimg.com/originals/8b/02/40/8b02409f975c98c89e15bc089e3bd289.gif');
console.log(img);

pid.replaceWith(img);

Aqui les dejo mis notas y mis practicas de los ejercicios propuestos en clase:

Imagen que usa el profesor en el ejemplo:

https://static.platzi.com/static/images/conf/[email protected]

Existen muchos atributos o propiedades, las cuales nos ayudan bastante y algunas ya se mencionaron, pero para modificar o leer ese atributo o propiedad tenemos a:

  • getAttribute

El cual nos ayuda a leer los atributos que tenga nuestro elemento (en este caso nuestro elemento es una etiqueta de p谩rrafo <p>).
.

  • setAttribute

Esto nos permite modificar el atributo, en este caso nuestro atributo es una clase.
.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic JavaScript | Practice Excercise</title>
</head>
<body>
	<p class="text">Este es el parrafo lleno de texto</p>	

	<script src="./js/script.js"></script>
</body>
</html>

.

// Esto es JavaScript
const parrafo = document.querySelector('.text');

// getAttribute
parrafo.getAttribute('class');

// setAttribute
parrafo.setAttribute('class', 'id');

Entonces esta es la forma para poder modificar los atributos de nuestros elementos en HTML

El curso va excelente. Abruma la cantidad de cosas que se deben saber; y es muy importante entender programaci贸n orientada a objetos. Creo que es necesario una introducci贸n corta al significado del DOM para saber de donde salen tantos m茅todos y atributos de nuestras etiquetas en html.

comparto el c贸digo que us茅 para reemplazar una etiqueta <p> y poner la imagen.

const picture = document.createElement('img');
picture.setAttribute('src', 'https://i.pinimg.com/564x/bf/bd/a5/bfbda55942f57c1b6e68614249cc1727.jpg')
console.log(picture);
// parraf es la etiqueta <p> que se est谩 reemplazando
parraf.replaceChildren(picture);
picture.setAttribute('width', '200px');
picture.setAttribute('height', '300px');

隆Qu茅 clase tan bacanaaaaaaaa! 馃殌

Platzilg fue lo mejor de esta clase

Con el ejercicio que Juan David propuso al final de la clase, luego de darle mil vueltas pens茅 en crear un string vac铆o para borrar el texto y luego insertar la imagen, pero en mi mente pens茅 que ser铆a trampa y me rend铆. Cuando segu铆 con el video vi que as铆 era la soluci贸n. Me miro y lloro en el espejo y me siento est煤pido, il贸gico jajajajja馃槀馃槀馃槀 pero bueno, al menos ya se que as铆 era

otra forma para haber borrado el texto era
elemento.textContent = " "

El pr贸ximo Platzilive con Freddy promocionando Platzilg.

con respecto al peque帽o reto, yo lo hice accediendo a las propiedades del elemento p.
desde la consola podemos ver estas propiedades, dentro de childNodes hay una lista ( el texto y la imagen) selecciono con [0] para acceder a la lista text y dentro de este a la propiedad textContent.

pid.childNodes[0].textContent = ' ';

Lo mejor de este curso, en mi opini贸n, es que el profesor es muy ocurrente鈥 puedes estar horas estudiando porque re铆r de sus comentarios te relaja un poco. Yo, por ejemplo, tuve que pausar el video cuando dice: 鈥淣o debo hacer propaganda porque no nos han pagado鈥 (Piensa un segundo) pantalla = Platzi-LG JAJAJAJJA mor铆.

appendchild es parecido al m茅todo .append pero en este caso solo admitir谩 nodos, por lo que NO podremos usar DOMString, es decir siempre que adjuntemos Nodos, podremos usar .append, .prepend y .appendchild, mientras que si queremos adjuntar una cadena de texto, solo podremos usar los m茅todos .append y .prepend.

  • la propiedad innerHTML nos permite modificar el html que este dentro del elemnto que estemos seleccionando.

Cuando hablamos de Clases en espec铆fico, existe un objeto, que funciona espec铆ficamente con las clases, y ese objeto es:

  • .classList

Este classList es un objeto que contiene una serie de m茅todos o funciones, los cuales nos van a ayudar a trabajar de manera m谩s sencilla.
.
Ejemplo 1:
Vamos a agregar una clase a un elemento de HTML

const elemento = document.querySelector('p');

elemento.classList.add('container');

.
Ejemplo 2:
Vamos a eliminar una la clase que acabamos de crear en el elemento de HTML <p>

const elemento = document.querySelector('p');

elemento.classList.remove('container');

Una de las cosas que se mencionan en el curso y que es muy 煤til es, cuando vas a crear o cambiar un elemento de tipo HTML, a HTML o a texto:

const elementoHtml = document.querySelector('p');
const elementoTexto = document.querySelector('p');

elementoHtml.innerHTML = 'Esto es un cambio de un elemento HTML a HTML';

elementoTexto.innerText = 'Esto es un texto normal';

este curso esta para verse varias veces

minuto 14:13 el profe dice que para utilizar el querySelector se debe utilizar con un hashtag si fuera un Id y con un punto si fuera un p谩rrafo. el punto se utiliza para las clases

Buenas tardes,

Yo lo realice la sustituci贸n del text utilizando la propiedad replaceChildren

Ejemplo:
pid.replaceChildren(img);

Muchas gracias.

Atentamente
Damian Arenales

Escribi todo tal cual el curso pero me aparece error
Ayuda.
.