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ó “considero 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: “No 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.
.