Curso de Manipulación del DOM

Clases del Curso de Manipulación del DOM

Instruido por:
Jonathan Alvarez
Jonathan Alvarez
Básico
4 horas de contenido
Ver la ruta de aprendizaje
Curso de Manipulación del DOM

Curso de Manipulación del DOM

Progreso del curso:0/28contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/28contenidos(0%)

DOM y Web API

Material Thumbnail

Y entonces nació internet...

02:23 min

Material Thumbnail

¿Qué es el DOM?

02:39 min

Material Thumbnail

Web APIs modernas

03:17 min

Operaciones básicas

Material Thumbnail

Leer nodos

09:31 min

Material Thumbnail

NodeLists vs Array

03:46 min

Material Thumbnail

Otras formas de agregar

06:55 min

Material Thumbnail

Atributos y propiedades

05:12 min

Material Thumbnail

Operaciones en lote

06:52 min

Workshop 1: Fetch

Material Thumbnail

Presentación del proyecto

01:10 min

Material Thumbnail

Descargando información y creando nodos

18:36 min

Material Thumbnail

Enriqueciendo la información

10:53 min

Material Thumbnail

Usando la API de internacionalización del browser

12:14 min

Material Thumbnail

Comparte el resultado

02:18 min

Eventos

Material Thumbnail

Reaccionar a lo que sucede en el DOM

13:58 min

Material Thumbnail

Event propagation

12:08 min

Workshop 2: Lazy loading

Material Thumbnail

Presentación del proyecto

03:34 min

Material Thumbnail

Nuestro propio plugin Lazy Loading

08:32 min

Material Thumbnail

Creando las imagenes con JavaScript

17:33 min

Material Thumbnail

Intersection Observer

14:21 min

Material Thumbnail

Aplicando Lazy loading

13:07 min

Material Thumbnail

Comparte el resultado

03:17 min

Workshop 3

Proyectos propuestos

04:17 min

LIbrerías relacionadas

Conclusiones

nuevosmás votadossin responder
Gabriel Hurtado Maldonado
Gabriel Hurtado Maldonado
Estudiante

Cuale es esa Polifill para append?

1
Marcelo Vinicio Chavarría Ugalde
Marcelo Vinicio Chavarría Ugalde
Estudiante

¿Cuál de las dos técnicas es mejor?

1
Marcelo Vinicio Chavarría Ugalde
Marcelo Vinicio Chavarría Ugalde
Estudiante

Saludos, tengo un problema a la hora de exportar he importar. El inspector del navegador me dice lo siguiente.

❌Uncaught SyntaxError: Cannot use import statement outside a module
❌Error de sintaxis no detectado: no se puede utilizar la declaración de importación fuera de un módulo

No entiendo porqué si lo he escrito, bien. Les muestro el código del index.js

import { registerImage } from"./lazy";

const max = 122;
const min = 1;
const random = () =>Math.floor(Math.random() * (max - min)) + min

const newImageNode = () => {
    //Aqui creamos el container para las imgconst container = document.createElement('div');
    container.classList.add('c_img-img');

    //Aqui creamos las imagenesconst tagImg = document.createElement('img');
    tagImg.src = `https://randomfox.ca/images/${random()}.jpg`;
    tagImg.width = '220';
    tagImg.alt = 'fox';

    //Aqui agregamos la img al container
    container.appendChild(tagImg);

    return container;
};

const newImg = newImageNode();
const app = document.querySelector('#imagen');

const addButton = document.querySelector('.button');
const addImage = () => {
    const newImage = newImageNode();
    app.appendChild(newImage);
    registerImage(newImage);
};

addButton.addEventListener('click', addImage)

Aquí también dejo el código del lazy.js

<
const isIntersecting = (entry) => {
    return entry.isIntersecting; //Nos muestra que está dentro del viewport
};

const accion = () => {
    console.log('hey!');
};

const observer = new IntersectionObserver((entries) => {
    entries
        .filter(isIntersecting)
        .forEach(accion);
});



exportconst registerImage = (image) => {
    //InterseccionObserver -> observer(image)
    observer.observe(image);
};   > 

Agradecería mucho la ayuda, gracais

1
jgabrielcastillo
jgabrielcastillo
Estudiante

buenas tardes que pena la pregunta
porque en esta parte del código cuando estoy adjuntando la nueva imagen solo me adjunta una cuanto le paso el nombre de la variable = nuevaImagen pero sile paso el nombre de la función = createImageNode(), si me crea otra imagen abajo, no se si es los paréntesis de la función que la ejecuta y la variable no se ejecuta
porfa sáquenme de la duda gracias

const nuevaImagen = createImageNode()
const mountNode = document.querySelector('#imagenes')

mountNode .append(
    nuevaImagen,
    nuevaImagen,
    nuevaImagen,    
    createImageNode(),
    createImageNode())
1
Andres Alvarez Becerra
Andres Alvarez Becerra
Estudiante

Hola, una pregunta ¿Cuándo quiere insertar un texto en un nodo, cuando debo usar un document.createTextNode o la propiedad element.tectContent ?

1
matias bravo
matias bravo
Estudiante

Todos los selectores vistos en la clase anterior arrojan un node list en vez de un array? Osea que siempre es recomendable pasarlos a array?

1
Mauricio Cruz
Mauricio Cruz
Estudiante

Esto serviría para tomar una API y llenar nuestro sitio web con esa información. Qué tan legal es eso?

1
John Ruiz
John Ruiz
Estudiante

Wenas a [email protected];

Tengo una pregunta existencial. Resulta que estoy haciendo el proyecto de video y estoy usando el template de snowpack y tailwind de los proyectos anteriores. Por alguna razón cuando agrego el archivo .mp4, da error 404 y no entiendo por qué? He intentado son usar el template y funciona. [email protected] le ha pasado esto antes y como lo han solucionado. Gracias de antemano.

1
Deyvi Granados Mandarachi
Deyvi Granados Mandarachi
Estudiante

Elemento sería sinonimo de Nodo ?

1
Fernando Daniel Burgos
Fernando Daniel Burgos
Estudiante

Snowpack no me actualiza mi pagina al hacer cambios. Estoy trabajando con WSL (Ubuntu) en la Windows Terminal. ¿Cómo puedo actualizar automáticamente?

1