Scribd
Cargar
10 vistas4 páginas

01 Domm

DOMMDOMMDOMMDOMMDOMMDOMM

Cargado por

s.porteak471
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
10 vistas4 páginas

01 Domm

DOMMDOMMDOMMDOMMDOMMDOMM

Cargado por

s.porteak471
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

Módulo 1: Introducción al DOM

1.1 ¿Qué es el DOM?


El DOM (Document Object Model) es una representación en forma de árbol del contenido de un documento HTML. Cada parte de la página
(etiquetas, textos, atributos) se convierte en un nodo que puede ser accedido y modificado desde JavaScript.

No se necesita código aquí, es una explicación conceptual.

1.2 Acceder al DOM desde JavaScript

javascript Copiar código

// Modificar el título del documento desde JavaScript document.title = "Curso Básico de DOM"; console.log(document.title); //
Muestra "Curso Básico de DOM"

Módulo 2: Creación y Selección de Elementos

2.1 Crear Elementos y Añadirlos al DOM

javascript Copiar código

// Crear un elemento h1 y agregarlo al cuerpo del documento const body = document.body; // Referencia al elemento <body> const
Explicar
titulo = document.createElement("h1"); titulo.textContent = "Bienvenido al Curso Básico de DOM"; body.appendChild(titulo); //
Añade el título al cuerpo del documento

2.2 Seleccionar Elementos por ID

javascript Copiar código

// Crear un párrafo con un ID y agregarlo al documento const parrafo = document.createElement("p"); parrafo.id = "miParrafo";
Explicar
parrafo.textContent = "Este es un párrafo de ejemplo."; body.appendChild(parrafo); // Seleccionar el párrafo por su ID y
modificar su texto const elementoSeleccionado = document.getElementById("miParrafo"); elementoSeleccionado.textContent = "Texto
modificado usando getElementById.";

2.3 Seleccionar Elementos por Clase

javascript Copiar código

// Crear varios elementos con la misma clase for (let i = 1; i <= 3; i++) { const div = document.createElement("div");
Explicar
div.className = "miClase"; div.textContent = `Este es el div número ${i}`; body.appendChild(div); } // Seleccionar y modificar
el contenido del primer div con la clase "miClase" const elementosConClase = document.getElementsByClassName("miClase");
elementosConClase[0].textContent = "Texto del primer div modificado.";

Módulo 3: Manipulación Básica de Contenido y Atributos

3.1 Modificar Texto e HTML

javascript Copiar código

// Crear un contenedor y un párrafo const contenedor = document.createElement("div"); contenedor.id = "contenedor";


Explicar
contenedor.textContent = "Este es un contenedor."; body.appendChild(contenedor); // Modificar el texto del contenedor
contenedor.textContent = "Texto cambiado con textContent."; // Modificar el HTML del contenedor contenedor.innerHTML = "
<strong>Este es un texto en negritas usando innerHTML</strong>";

3.2 Modificación de Atributos

javascript Copiar código

// Crear una imagen y un enlace const imagen = document.createElement("img"); imagen.id = "miImagen"; imagen.src =
Explicar
"imagenInicial.png"; // URL de ejemplo imagen.alt = "Descripción de la imagen"; body.appendChild(imagen); // Cambiar el
atributo 'src' de la imagen imagen.setAttribute("src", "nuevaImagen.png"); // URL de ejemplo // Crear un enlace y cambiar su
atributo 'href' const enlace = document.createElement("a"); enlace.id = "miEnlace"; enlace.href = "https://ejemplo.com";
enlace.textContent = "Visita este enlace"; body.appendChild(enlace); // Mostrar el valor del atributo 'href' del enlace
console.log(enlace.getAttribute("href"));

Módulo 4: Crear y Eliminar Elementos

4.1 Crear un Elemento y Añadirlo

javascript Copiar código

// Crear un botón y añadirlo al documento const boton = document.createElement("button"); boton.textContent = "Clic para un
Explicar
saludo"; body.appendChild(boton); // Añadir un evento para mostrar un mensaje al hacer clic boton.addEventListener("click", ()
=> { alert("¡Hola, bienvenido al curso de DOM!"); });

4.2 Eliminar Elementos del DOM

javascript Copiar código

// Crear un párrafo y eliminarlo al hacer clic en el botón const parrafoEliminar = document.createElement("p");


Explicar
parrafoEliminar.textContent = "Haz clic en el botón para eliminarme."; body.appendChild(parrafoEliminar);
boton.addEventListener("click", () => { parrafoEliminar.remove(); // Elimina el párrafo cuando el botón se presiona });

Módulo 5: Introducción a Eventos Básicos

5.1 Añadir un Evento de Clic

javascript Copiar código

// Crear un botón y añadir un evento de clic const botonEvento = document.createElement("button"); botonEvento.textContent =


Explicar
"Haz clic aquí"; body.appendChild(botonEvento); // Mostrar un mensaje en la consola al hacer clic
botonEvento.addEventListener("click", () => { console.log("Botón clickeado desde el evento."); });

5.2 Cambiar el Estilo de un Elemento con un Evento


javascript
Copiar código

// Crear un div que cambia de color cuando se pasa el mouse sobre él const caja = document.createElement("div");
Explicar
caja.textContent = "Pasa el mouse sobre mí."; caja.style.width = "200px"; caja.style.height = "100px";
caja.style.backgroundColor = "lightblue"; body.appendChild(caja); // Cambiar el color de fondo cuando el mouse entra y sale del
div caja.addEventListener("mouseenter", () => { caja.style.backgroundColor = "lightgreen"; });
caja.addEventListener("mouseleave", () => { caja.style.backgroundColor = "lightblue"; });

Módulo 6: Conclusión
Este curso básico te ha enseñado cómo:
Crear y añadir elementos al DOM desde JavaScript.
Seleccionar elementos por ID y clase.
Modificar contenido y atributos de elementos.
Añadir y manejar eventos simples como clics.
Eliminar elementos del DOM.

También podría gustarte