diff --git a/Practicas/Practicas JS/Bucles 02/02_bucles_javascript.html b/Practicas/Practicas JS/Bucles 02/02_bucles_javascript.html
new file mode 100644
index 0000000..f97b6c2
--- /dev/null
+++ b/Practicas/Practicas JS/Bucles 02/02_bucles_javascript.html	
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>02 Bucles javascript</title>
+  <link rel="stylesheet" href="css/estilos.css" />
+</head>
+<body>
+<h1>Bucles Javascript 02</h1>
+
+  <script>
+//1 Arrays beneficios y gastos
+
+// Arrays de beneficios y gastos diarios(semana)
+const ingresosDiarios = [120, 150, 200, 180, 250, 300, 210];
+const gastosDiarios = [50, 60, 40, 80, 90, 70, 60];
+
+// Inicializamos el beneficio neto total
+let beneficioNetoTotal = 0;
+/*
+// Utilizamos un bucle 'for' para calcular el beneficio neto diario y total
+for (let dia = 0; dia < ingresosDiarios.length; dia++) {
+  // Calculamos el beneficio neto diario restando los gastos del beneficio
+  let beneficioNetoDiario = ingresosDiarios[dia] - gastosDiarios[dia];
+
+  // Mostramos el beneficio neto diario
+  document.write(`Día ${dia + 1}: Beneficio Neto = ${beneficioNetoDiario}`);
+  document.write("<br>");
+
+  // Sumamos el beneficio neto diario al beneficio neto total
+  beneficioNetoTotal += beneficioNetoDiario;
+}
+
+// Mostramos el beneficio neto total al final de la semana
+document.write(`Beneficio Neto Total Semanal = ${beneficioNetoTotal}`);
+*/
+
+//CON FOR EACH*
+	// Beneficio neto diario y total
+ingresosDiarios.forEach(function(ingreso, dia) {
+  // Utilizamos la variable 'dia' para acceder a los gastos correspondientes
+  const gastoDiario = gastosDiarios[dia];
+
+  // Calculamos el beneficio neto diario restando los gastos del beneficio
+  let beneficioNetoDiario = ingreso - gastoDiario;
+
+  // Mostramos el beneficio neto diario
+  document.write(`Día ${dia + 1}: Beneficio Neto = ${beneficioNetoDiario}`);
+  document.write("<br>");
+
+  // Sumamos el beneficio neto diario al beneficio neto total
+  beneficioNetoTotal += beneficioNetoDiario;
+});
+  document.write("Beneficio Neto Total Semanal ="+beneficioNetoTotal);
+	  </script>
+</body>
+</html>
diff --git a/Practicas/Practicas JS/Bucles 02/index.html b/Practicas/Practicas JS/Bucles 02/index.html
new file mode 100644
index 0000000..c8e5f6f
--- /dev/null
+++ b/Practicas/Practicas JS/Bucles 02/index.html	
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../Introduccion/estilos.css">
+    <script src="./js/main.js"></script>
+    <title>Document</title>
+    <script>
+
+    </script>
+</head>
+<body>
+    <script>
+        document.write(muestraArray(DIASSEMANA,))
+        document.write(muestraArray(INGRESOS))
+        document.write(muestraArray(GASTOS))
+        document.write(muestraArray(beneficios()))
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Practicas/Practicas JS/Bucles 02/js/main.js b/Practicas/Practicas JS/Bucles 02/js/main.js
new file mode 100644
index 0000000..fc83dc6
--- /dev/null
+++ b/Practicas/Practicas JS/Bucles 02/js/main.js	
@@ -0,0 +1,32 @@
+const DIASSEMANA = [
+  "Lunes",
+  "Martes",
+  "Miercoles",
+  "Jueves",
+  "Viernes",
+  "Sabado",
+  "Domingo",
+];
+const INGRESOS = [120, 150, 200, 180, 250, 300, 210];
+const GASTOS = [50, 60, 40, 80, 90, 70, 60];
+
+function muestraArray(array) {
+  let linea = "";
+  let relleno = "&nbsp";
+
+  array.forEach((el) => {
+    linea += el;
+    for (let i = 0; i < 15-(el.toString().length); i++) {
+        linea +=relleno
+    }
+  });
+  return linea + "<br>";
+}
+
+function beneficios() {
+  let resultado = [];
+  for (let i = 0; i < DIASSEMANA.length; i++) {
+    resultado[i] = INGRESOS[i] - GASTOS[i];
+  }
+  return resultado;
+}
diff --git a/Practicas/Practicas JS/DOM 01/ejercicio01_DOM RESUELTO.html b/Practicas/Practicas JS/DOM 01/ejercicio01_DOM RESUELTO.html
new file mode 100644
index 0000000..5d8fb82
--- /dev/null
+++ b/Practicas/Practicas JS/DOM 01/ejercicio01_DOM RESUELTO.html	
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<title>Ejercicio 01 - DOM b�sico</title>
+
+</head>
+<body>
+<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing elit</a>. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer lacus. Vestibulum venenatis erat eu odio. Praesent id metus.</p>
+<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin consequat auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>. Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam <a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam euismod diam. In magna massa, mattis id, pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus.</p>
+<p id="oculto" style="display:none">Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet est, a <a href="http://prueba">aliquam leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique. Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id augue eu lorem dictum interdum. Donec pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula. Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. <a href="http://prueba5">Sed non lectus non est pellentesque</a> auctor.</p>
+
+<a id="enlace" href="#" onclick="muestra()">Sigue leyendo</a>
+
+
+<script>
+
+	// Numero de enlaces de la pagina
+var enlaces = document.getElementsByTagName("a");
+document.write("<br>");
+document.write("Numero de enlaces = "+ enlaces.length);
+document.write("<br>");
+console.log(enlaces);
+	// Direccion del penultimo enlace
+var enlaceP=enlaces[enlaces.length-2].href;
+var mensaje = "El penultimo enlace apunta a: "+enlaceP;
+document.write(mensaje);
+document.write("<br>");
+console.log(enlaces[enlaces.length-2]);
+	// Numero de enlaces que apuntan a http://prueba
+var contador = 0; 
+for(var i=0; i<enlaces.length; i++) {
+ 
+    if(enlaces[i].href === "http://prueba" || enlaces[i].href === "http://prueba/") {
+      contador++;
+    }
+}
+document.write(contador);
+document.write("<br>");	
+	
+	// Numero de enlaces del tercer p�rrafo
+var parrafos = document.getElementsByTagName("p");
+var parrafo3=parrafos[2];
+var enlaces3P =parrafo3.getElementsByTagName("a"); 
+  //var enlaces3P = parrafos[2].getElementsByTagName("a");
+document.write(enlaces3P.length);  
+document.write("<br>");
+
+
+</script>
+</body>
+</html>
diff --git a/Practicas/Practicas JS/DOM 01/ejercicio01_DOM_enunciado.html b/Practicas/Practicas JS/DOM 01/ejercicio01_DOM_enunciado.html
new file mode 100644
index 0000000..221900b
--- /dev/null
+++ b/Practicas/Practicas JS/DOM 01/ejercicio01_DOM_enunciado.html	
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+    <title>Ejercicio 01 - DOM b�sico</title>
+
+</head>
+
+<body>
+    <p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing elit</a>. Sed mattis enim vitae orci.
+        Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien
+        nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices
+        porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis,
+        faucibus ut, rhoncus non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu adipiscing
+        ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer
+        adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec
+        arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer
+        lacus. Vestibulum venenatis erat eu odio. Praesent id metus.</p>
+    <p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+        posuere cubilia Curae; Proin consequat auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>.
+        Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse
+        cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum
+        nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam
+        <a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam euismod diam. In magna massa, mattis id,
+        pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in
+        scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus.</p>
+    <p id="oculto" style="display:none">Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at
+        sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet
+        est, a <a href="http://prueba">aliquam leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique.
+        Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id
+        augue eu lorem dictum interdum. Donec pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula.
+        Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada
+        tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. <a href="http://prueba5">Sed non lectus non
+            est pellentesque</a> auctor.</p>
+
+    <a id="enlace" href="#" onclick="">Sigue leyendo</a>
+
+    <script>
+        let enlaces = document.getElementsByTagName("a");
+        let penultimoEnlace = enlaces[enlaces.length - 2].getAttribute("href");
+        let enlacesPrueba = document.querySelectorAll('a[href="http://prueba"]');
+        let tercerParrafo = document.getElementsByTagName("p")[2];
+        let enlacesTercerParrafo = tercerParrafo.getElementsByTagName("a");
+
+        var p = document.createElement("p");
+        p.textContent = `Nº Enlaces: ${enlaces.length}`;
+        document.body.appendChild(p);
+
+        var p = document.createElement("p");
+        p.textContent = `Penultimo enlace: ${penultimoEnlace}`;
+        document.body.appendChild(p);
+
+        var p = document.createElement("p");
+        p.textContent = `Enlaces que comienzan con Prueba: ${enlacesPrueba.length}`;
+        document.body.appendChild(p);
+
+        var p = document.createElement("p");
+        p.textContent = `Nº Enlaces en el tercer parrafo: ${enlacesTercerParrafo.length}`;
+        document.body.appendChild(p);
+
+
+
+
+    </script>
+
+
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Practicas/Practicas JS/DOM 02/ejercicio01_DOM_enunciado.html b/Practicas/Practicas JS/DOM 02/ejercicio01_DOM_enunciado.html
new file mode 100644
index 0000000..d9157e2
--- /dev/null
+++ b/Practicas/Practicas JS/DOM 02/ejercicio01_DOM_enunciado.html	
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+    <title>Ejercicio 01 - DOM b�sico</title>
+
+</head>
+
+<body>
+    <p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing elit</a>. Sed mattis enim vitae orci.
+        Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien
+        nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices
+        porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis,
+        faucibus ut, rhoncus non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu adipiscing
+        ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer
+        adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec
+        arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer
+        lacus. Vestibulum venenatis erat eu odio. Praesent id metus.</p>
+    <p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+        posuere cubilia Curae; Proin consequat auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>.
+        Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse
+        cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum
+        nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam
+        <a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam euismod diam. In magna massa, mattis id,
+        pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in
+        scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus.</p>
+    <p id="oculto" style="display:none">Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at
+        sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet
+        est, a <a href="http://prueba">aliquam leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique.
+        Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id
+        augue eu lorem dictum interdum. Donec pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula.
+        Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada
+        tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. <a href="http://prueba5">Sed non lectus non
+            est pellentesque</a> auctor.   <a href="#" onclick="ocultar(document.getElementById('oculto'))">Ocultar</a>  </p>
+
+    <a id="enlace" href="#" onclick="mostrar(document.getElementById('oculto'))">Sigue leyendo</a>
+
+    <script>
+        let enlaces = document.getElementsByTagName("a");
+        let penultimoEnlace = enlaces[enlaces.length - 2].getAttribute("href");
+        let enlacesPrueba = document.querySelectorAll('a[href="http://prueba"]');
+        let tercerParrafo = document.getElementsByTagName("p")[2];
+        let enlacesTercerParrafo = tercerParrafo.getElementsByTagName("a");
+
+
+        function mostrar(elemento){
+                elemento.style.display="block";
+        }
+        function ocultar(elemento){
+                elemento.style.display="none";
+        }
+
+        var p = document.createElement("p");
+        p.textContent = `Nº Enlaces: ${enlaces.length}`;
+        document.body.appendChild(p);
+
+        var p = document.createElement("p");
+        p.textContent = `Penultimo enlace: ${penultimoEnlace}`;
+        document.body.appendChild(p);
+
+        var p = document.createElement("p");
+        p.textContent = `Enlaces que comienzan con Prueba: ${enlacesPrueba.length}`;
+        document.body.appendChild(p);
+
+        var p = document.createElement("p");
+        p.textContent = `Nº Enlaces en el tercer parrafo: ${enlacesTercerParrafo.length}`;
+        document.body.appendChild(p);
+
+
+
+
+    </script>
+
+
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Practicas/Practicas JS/DOM 02/ejercicio02_DOM CORREGIDO.html b/Practicas/Practicas JS/DOM 02/ejercicio02_DOM CORREGIDO.html
new file mode 100644
index 0000000..2326c51
--- /dev/null
+++ b/Practicas/Practicas JS/DOM 02/ejercicio02_DOM CORREGIDO.html	
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Ejercicio 02 - DOM </title>
+		
+	</head>
+	<body>
+		<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing elit</a>. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer lacus. Vestibulum venenatis erat eu odio. Praesent id metus.</p>
+		<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin consequat auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>. Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam <a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam euismod diam. In magna massa, mattis id, pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus.</p>
+		<p id="oculto" style = "display: none">Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet est, a <a href="http://prueba">aliquam leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique. Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id augue eu lorem dictum interdum. Donec pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula. Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. <a href="http://prueba5">Sed non lectus non est pellentesque</a> auctor.</p>
+		
+		<!-- <a id="enlace" href="#" onclick="muestra()">Sigue leyendo</a>
+			<br>
+		<a id="enlace2" style="display:none" href="#" onclick="oculta()">Oculta</a> -->
+		<a id="enlace" href="#" onclick="muestraOculta()">Sigue leyendo</a>
+		<br>
+		<a id="enlace2" style="display:none" href="#" onclick="muestraOculta()">Oculta</a>
+		
+		<script>
+			
+			let	parrafoOculto=document.getElementById("oculto");
+			let	botonSigueLeyendo=document.getElementById("enlace");
+			let	botonOcultaTexto=document.getElementById("enlace2");
+			
+			function muestra() {
+				parrafoOculto.style = "display: inline";
+				botonOcultaTexto.style = "display: inline";
+				botonSigueLeyendo.style = "display: none";
+			}
+			
+			function oculta() {
+				parrafoOculto.style = "display: none";
+				botonOcultaTexto.style = "display: none";
+				botonSigueLeyendo.style = "display: inline";
+			}
+			
+			// En una sola funci�n
+			
+			function muestraOculta() {
+				if (parrafoOculto.style.display === "none") {
+					parrafoOculto.style = "display: inline";
+					botonOcultaTexto.style = "display: inline";
+					botonSigueLeyendo.style = "display: none";
+					} else {
+					parrafoOculto.style = "display: none";
+					botonOcultaTexto.style = "display: none";
+					botonSigueLeyendo.style = "display: inline";
+				}	
+			}	
+		</script>
+	</body>
+</html>
diff --git a/Practicas/Practicas JS/DOM/08_ELEMENTOS_DOM.html b/Practicas/Practicas JS/DOM/08_ELEMENTOS_DOM.html
new file mode 100644
index 0000000..c5f7c1a
--- /dev/null
+++ b/Practicas/Practicas JS/DOM/08_ELEMENTOS_DOM.html	
@@ -0,0 +1,181 @@
+<!Doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>ELEMENTOS DOM</title>
+
+</head>
+<body>
+<div id="page" onclick="azul()"><p>Este es un div con la ID:page</p></div>
+<button onclick="azul()">Pon en azul</button>
+<div class="item">Un div con clase "item"</div>
+<div class="item" name="nombre">Un div con clase "item"</div>
+<div class="item" name="nombre">Un div con clase "item"</div>
+<button onclick="crea();crea1()">Crea div</button><br>
+<button onclick="creaAd()">Crea div adyacente</button><br>
+<button onclick="creaCUA()">Crea cuadrado</button><br>
+<button onclick="creaAd2()">Crea otro adyacente</button><br>
+<div class="info"><strong>Importante</strong></div>
+<div class="data"><h1>Tema 1</h1></div>
+<script>
+	
+//En JavaScript, el DOM es crucial para interactuar dinámicamente con el contenido de una página web.	
+	
+//** Seleccionar elementos del - DOM Búsqueda de elementos HTML desde Javascript
+
+// .getElementById(id) Nos devuelve un elemento HTML - null si no encuentra
+function azul() {
+var page=document.getElementById("page");// <div id="page"></div>	
+page.style.color="blue";
+}
+
+// .getElementsByClassName(class) Nos devuelve un (HTMLCollection)(similar a un array) - devuelve [] si no encuentra
+var items = document.getElementsByClassName("item");  // [div, div, div]
+console.log(items[0]);      // Primer item encontrado: <div class="item"></div>
+console.log(items.length);  // 3
+
+// .getElementsByName(name) Nos devuelve un (HTMLCollection)(similar a un array) - devuelve [] si no encuentra
+var nombrado = document.getElementsByName("nombre");  // [div, div]
+console.log(nombrado[0]);      // Primer div encontrado: <div class="item" name="nombre"></div>
+console.log(nombrado.length);  // 2
+
+// .getElementsByTagName(tag) Nos devuelve un (HTMLCollection)(similar a un array) - devuelve [] si no encuentra
+var divs= document.getElementsByTagName("div");  // [div, div, div, div,div,div]
+console.log(divs.length);  // 6
+
+// .querySelector(sel) Primer elemento que coincide con el selector CSS sel. Si no,null.
+
+// .querySelectorAll(sel) Busca todos los elementos que coinciden con el selector CSS sel. Si no, [].
+
+
+/*
+//// Crear elementos en el DOM
+
+div = document.createElement("div"); // Creamos un <div></div>
+span = document.createElement("span");// Creamos un <span></span>
+img = document.createElement("img"); // Creamos un <img>
+
+// Con propiedades
+div = document.createElement("div"); // <div></div>
+div.id = "page";          // <div id="page"></div>
+div.className = "data";   // <div id="page" class="data"></div>
+div.style = "color: red"; // <div id="page" class="data" style="color: red"></div>
+
+// setAttribute(attr, value)
+div.setAttribute("id", "page");
+
+//// Modificar elementos en el DOM
+
+/// Remplazar
+// .textContent  Devuelve el contenido de texto del elemento. Se puede asignar para modificar.
+var div = document.querySelector("div");  // <div></div>
+div.textContent = "Hola a todos"; // <div>Hola a todos</div>
+div.textContent;  // "Hola a todos"
+
+// .innerHTML  Devuelve el contenido HTML del elemento. Se puede usar asignar para modificar.
+var div = document.querySelector(".info"); // <div class="info"></div>
+div.innerHTML = "<strong>Importante</strong>"; // Interpreta el HTML
+div.innerHTML;    // "<strong>Importante</strong>"
+div.textContent;  // "Importante"
+div.textContent = "<strong>Importante</strong>";  // No interpreta el HTML
+
+// .outerHTML Devuelve el contenido HTML del elemento incluyendo el propio elemento. Se puede usar asignar para modificar.
+// "<div class="data"><h1>Tema 1</h1></div>"
+var data = document.querySelector(".data");
+data.innerHTML = "<h1>Tema 1</h1>";
+data.textContent;   // "Tema 1"
+data.innerHTML;     // "<h1>Tema 1</h1>"
+data.outerHTML;     // "<div class="data"><h1>Tema 1</h1></div>"
+
+/// Insertar
+// .appendChild(node)  Añade como hijo. Devuelve el nodo insertado.
+var img = document.createElement("img");
+img.src = "imagenes/rectangulo.jpg";
+img.alt = "Imagen de un rectangulo";
+
+document.body.appendChild(img); // Lo insertaría como hijo en el body al final de los que haya.
+
+// .insertAdjacentElement(pos, elem) Inserta el elemento elem en la posición pos. Si falla,null.
+// .insertAdjacentHTML(pos, str) Inserta el código HTML str en la posición pos.
+// .insertAdjacentText(pos, text) Inserta el texto text en la posición pos.
+
+var div = document.createElement("div");  // <div></div>
+div.textContent = "Ejemplo";                // <div>Ejemplo</div>
+
+var app = document.querySelector("#app"); // <div id="app">App</div>
+// pos
+app.insertAdjacentElement("beforebegin", div);
+// Opción 1: <div>Ejemplo</div> <div id="app">App</div>
+
+app.insertAdjacentElement("afterbegin", div);
+// Opción 2: <div id="app"> <div>Ejemplo</div> App</div>
+
+app.insertAdjacentElement("beforeend", div);
+// Opción 3: <div id="app">App <div>Ejemplo</div> </div>
+
+app.insertAdjacentElement("afterend", div);
+// Opción 4: <div id="app">App</div> <div>Ejemplo</div>
+
+// Element HTML Text
+app.insertAdjacentElement("beforebegin", div);
+// Opción 1: <div>Ejemplo</div> <div id="app">App</div>
+
+app.insertAdjacentHTML("beforebegin", '<p>Hola</p>');
+// Opción 2: <p>Hola</p> <div id="app">App</div>
+
+app.insertAdjacentText("beforebegin", "Hola a todos");
+// Opción 3: Hola a todos <div id="app">App</div>
+*/
+
+// Pasos para crear e insertar
+function crea1() {
+var div = document.createElement("div"); // <div></div>
+div.id = "page2";          // <div id="page"></div>
+div.className = "data";   // <div id="page" class="data"></div>
+div.style = "color: red"; // <div id="page" class="data" style="color: red"></div>
+div.textContent = "Hola a todos"; 
+// Inserto
+document.body.appendChild(div);
+	}
+
+function crea() {
+var img = document.createElement("img");
+img.src = "./imagenes/triangulo.png";
+img.alt = "Imagen triangulo";
+
+document.body.appendChild(img);
+}
+
+function creaCUA() {
+var img = document.createElement("img");
+img.src = "./imagenes/rectangulo.jpg";
+img.alt = "Imagen cuadrado";
+
+document.body.appendChild(img);
+}
+
+function creaAd() {
+var div = document.createElement("div"); // <div></div>
+var page=document.getElementById("page");
+div.id = "adyacente";          // <div id="page"></div>
+div.className = "data";   // <div id="page" class="data"></div>
+div.style = "color: green"; // <div id="page" class="data" style="color: green"></div>
+div.textContent = "Hola a todos soy adyacente"; 
+// Inserto
+page.insertAdjacentElement("afterend", div);
+	}
+	
+function creaAd2() {
+var div = document.createElement("div"); // <div></div>
+var page=document.getElementsByClassName("item");
+sitio=page[1];
+div.id = "adyacente";          // <div id="page"></div>
+div.className = "data";   // <div id="page" class="data"></div>
+div.style = "color: green"; // <div id="page" class="data" style="color: red"></div>
+div.textContent = "Hola a todos soy adyacente"; 
+// Inserto
+sitio.insertAdjacentElement("afterend", div);
+	}	
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Practicas/Practicas JS/DOM/imagenes/cilindro.png b/Practicas/Practicas JS/DOM/imagenes/cilindro.png
new file mode 100644
index 0000000..33021df
Binary files /dev/null and b/Practicas/Practicas JS/DOM/imagenes/cilindro.png differ
diff --git a/Practicas/Practicas JS/DOM/imagenes/circunferencia.jpg b/Practicas/Practicas JS/DOM/imagenes/circunferencia.jpg
new file mode 100644
index 0000000..fa23120
Binary files /dev/null and b/Practicas/Practicas JS/DOM/imagenes/circunferencia.jpg differ
diff --git a/Practicas/Practicas JS/DOM/imagenes/rectangulo.jpg b/Practicas/Practicas JS/DOM/imagenes/rectangulo.jpg
new file mode 100644
index 0000000..9856631
Binary files /dev/null and b/Practicas/Practicas JS/DOM/imagenes/rectangulo.jpg differ
diff --git a/Practicas/Practicas JS/DOM/imagenes/triangulo.png b/Practicas/Practicas JS/DOM/imagenes/triangulo.png
new file mode 100644
index 0000000..d1149ee
Binary files /dev/null and b/Practicas/Practicas JS/DOM/imagenes/triangulo.png differ
