Skip to content

Commit 409007e

Browse files
mouredevmouredev
committed
Clase 6 Intermedio | 06/03/2025
Manejo del DOM
1 parent 40fc52f commit 409007e

File tree

7 files changed

+240
-2
lines changed

7 files changed

+240
-2
lines changed

‎Intermediate/11-dom.js‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/*
2+
Clase 6 - Manejo del DOM (06/03/2025)
3+
Vídeo: https://www.twitch.tv/videos/2398786900?t=00h11m52s
4+
*/
5+
6+
// Manejo del DOM (Document Object Model)
7+
8+
console.log(document)
9+
10+
// - Selección de elementos
11+
12+
// Métodos básicos (selector HTML)
13+
14+
const myElementById = document.getElementById("id")
15+
16+
const myElementsByClass = document.getElementsByClassName("class")
17+
18+
const myElementsByTag = document.getElementsByTagName("tag")
19+
20+
// Métodos más modernos (selector CSS)
21+
22+
document.querySelector(".paragraph")
23+
document.querySelectorAll(".paragraph")
24+
25+
// - Manipulación de elementos
26+
27+
const title = document.getElementById("title")
28+
title.textContent = "Hola JavaScript"
29+
30+
const container = document.querySelector(".container")
31+
container.innerHTML = "<p>Esto es un nuevo párrafo</p>"
32+
33+
// - Modificación de atributos
34+
35+
// Obtención del atributo
36+
const link = document.querySelector("a")
37+
const url = link.getAttribute("href")
38+
39+
// Establecimiento del atributo
40+
link.setAttribute("href", "https://example.com")
41+
42+
// Comprobación de atributo
43+
const hasTarget = link.hasAttribute("target")
44+
45+
// Eliminación de atributos
46+
link.removeAttribute("target")
47+
48+
// - Interacción con clases CSS
49+
50+
const box = document.querySelector(".box")
51+
box.classList.add("selected")
52+
box.classList.remove("selected")
53+
box.classList.toggle("selected")
54+
55+
const button = document.querySelector("button")
56+
button.style.backgroundColor = "blue"
57+
button.style.color = "white"
58+
button.style.padding = "10px"
59+
60+
// - Creación y eliminación de elementos
61+
62+
// Creación
63+
64+
const newParagraph = document.createElement("p")
65+
newParagraph.textContent = "Este es un nuevo párrafo creado desde JS"
66+
newParagraph.style.padding = "8px"
67+
68+
container.appendChild(newParagraph)
69+
70+
const itemsList = document.querySelector("ul")
71+
const newItem = document.createElement("li")
72+
newItem.textContent = "Nuevo elemento"
73+
74+
// Inserción en un lugar concreto
75+
76+
const secondItem = itemsList.children[1]
77+
itemsList.insertBefore(newItem, secondItem)
78+
79+
itemsList.append(newItem)
80+
itemsList.prepend(newItem)
81+
secondItem.before(newItem)
82+
secondItem.after(newItem)
83+
84+
// Eliminación
85+
86+
newParagraph.remove()
87+
88+
// Eliminación tradicional
89+
90+
const parent = newParagraph.parentElement
91+
parent.removeChild(newParagraph)
92+
93+
// - Elementos del DOM
94+
95+
function showMsg() {
96+
alert("Clic!")
97+
}
98+
99+
const sendButton = document.querySelector("#send")
100+
sendButton.addEventListener("click", showMsg)
101+
102+
sendButton.addEventListener("click", () => {
103+
alert("Clic con una arrow function!")
104+
})
105+
106+
// Eventos comunes
107+
108+
document.addEventListener("DOMContentLoader", () => {
109+
console.log("El DOM está completamente cargado")
110+
})
111+
112+
sendButton.addEventListener("mouseenter", () => {
113+
sendButton.style.backgroundColor = "green"
114+
})
115+
116+
sendButton.addEventListener("mouseleave", () => {
117+
sendButton.style.backgroundColor = "blue"
118+
})
119+
120+
const form = document.querySelector("form")
121+
form.addEventListener("submit", (event) => {
122+
// Código
123+
})

‎Intermediate/12-dom-example.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!--
2+
Clase 6 - Manejo del DOM (06/03/2025)
3+
Vídeo: https://www.twitch.tv/videos/2398786900?t=00h11m52s
4+
-->
5+
<!DOCTYPE html>
6+
<html lang="es">
7+
<head>
8+
<meta charset="UTF-8">
9+
<title>HTML de ejemplo</title>
10+
</head>
11+
<body>
12+
<h1>Mi título</h1>
13+
<button>Mi botón</button>
14+
<!-- <script>
15+
console.log("Mi script")
16+
const myH1 = document.querySelector("h1")
17+
console.log(myH1)
18+
19+
myH1.textContent = "Mi nuevo título"
20+
</script> -->
21+
<script src="13-dom-example.js"></script>
22+
</body>
23+
</html>

‎Intermediate/13-dom-example.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/*
2+
Clase 6 - Manejo del DOM (06/03/2025)
3+
Vídeo: https://www.twitch.tv/videos/2398786900?t=00h11m52s
4+
*/
5+
6+
console.log(document)
7+
8+
const myH1 = document.querySelector("h1")
9+
console.log(myH1)
10+
11+
myH1.textContent = "Mi nuevo título"

‎Intermediate/14-tasklist.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!--
2+
Clase 6 - Manejo del DOM (06/03/2025)
3+
Vídeo: https://www.twitch.tv/videos/2398786900?t=00h11m52s
4+
-->
5+
<!DOCTYPE html>
6+
<html lang="es">
7+
<head>
8+
<meta charset="UTF-8">
9+
<title>Lista de tareas</title>
10+
</head>
11+
<body>
12+
<h1>Mis tareas</h1>
13+
<input id="text" type="text" placeholder="Escribe una tarea">
14+
<button id="button">Agregar tarea</button>
15+
<ul id="list"></ul>
16+
<script src="15-tasklist.js"></script>
17+
</body>
18+
</html>

‎Intermediate/15-tasklist.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
Clase 6 - Manejo del DOM (06/03/2025)
3+
Vídeo: https://www.twitch.tv/videos/2398786900?t=00h11m52s
4+
*/
5+
6+
const text = document.getElementById("text")
7+
const button = document.getElementById("button")
8+
const list = document.getElementById("list")
9+
10+
function addTask() {
11+
12+
if (text.value === "") return
13+
14+
const newElement = document.createElement("li")
15+
newElement.textContent = text.value
16+
17+
newElement.addEventListener("click", () => {
18+
newElement.remove()
19+
})
20+
21+
list.appendChild(newElement)
22+
23+
text.value = ""
24+
}
25+
26+
button.addEventListener("click", addTask)
27+
28+
text.addEventListener("keypress", (event) => {
29+
if (event.key === "Enter") {
30+
addTask()
31+
}
32+
})

‎Intermediate/16-dom-exercises.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/*
2+
Clase 6 - Manejo del DOM (06/03/2025)
3+
Vídeo: https://www.twitch.tv/videos/2398786900?t=00h11m52s
4+
*/
5+
6+
// 1. Crea un elemento (por ejemplo, un <h1 id="title">) y cambia su contenido a "¡Hola Mundo!"" al cargar la página
7+
8+
// 2. Inserta una imagen con id="myImage" y cambia su atributo src a otra URL
9+
10+
// 3. Crea un <div id="box"> sin clases y agrega la clase resaltado cuando se cargue la página
11+
12+
// 4. Crea un párrafo con id="paragraph" y cambia su color de texto a azul
13+
14+
// 5. Agrega un botón que, al hacer clic, cree un nuevo elemento <li> con el texto "Nuevo elemento y lo agregue a una lista <ul id="list">
15+
16+
// 6. Crea un párrafo con id="deleteParagraph" y un botón. Al hacer clic en el botón, elimina el párrafo del DOM
17+
18+
// 7. Crea un <div id="content"> con algún texto y reemplaza su contenido por un <h2> con el mensaje "Nuevo Contenido"
19+
20+
// 8. Crea un botón con id="greetBtn" y añade un evento que muestre una alerta con el mensaje "¡Hola!" al hacer clic
21+
22+
// 9. Crea un <input id="textInput"> y un <div id="result">. Al escribir en el input, el <div> se debe actualizarse mostrando lo que se escribe
23+
24+
// 10. Crea un botón con id="backgroundBtn" y, al hacer clic, cambia el color de fondo del <body> a un color diferente

‎README.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515

1616
### Curso de fundamentos intermedio (continuación del desde cero). Nueva clase cada semana.
1717

18-
#### 🔴 PRÓXIMA CLASE EN DIRECTO: Jueves 6 de marzo a las 20:00h (España) en [Twitch](https://twitch.tv/mouredev) y [YouTube](https://youtube.com/@mouredev)
19-
#### 🗓️ CONSULTA EL HORARIO POR PAÍS Y CREA UN RECORDATORIO desde [Discord](https://discord.gg/63Q2Ts6p?event=1344414401603833886)
18+
#### 🔴 PRÓXIMA CLASE EN DIRECTO: Jueves 12 de marzo a las 20:00h (España) en [Twitch](https://twitch.tv/mouredev) y [YouTube](https://youtube.com/@mouredev)
19+
#### 🗓️ CONSULTA EL HORARIO POR PAÍS Y CREA UN RECORDATORIO desde [Discord](https://discord.gg/tqsThtGg?event=1347230711693705339)
2020

2121
* Clase 1 [29/01/2025] - Funciones avanzadas
2222
* [Vídeo](https://www.twitch.tv/videos/2367024319?t=00h08m45s)
@@ -44,6 +44,13 @@
4444
* [Código](./Intermediate/09-apis.js)
4545
* [Ejericios](./Intermediate/10-apis-exercises.js)
4646

47+
* Clase 6 [06/03/2025] - Manejo del DOM
48+
* [Vídeo](https://www.twitch.tv/videos/2398786900?t=00h11m52s)
49+
* [Código](./Intermediate/11-dom.js)
50+
* Ejemplo simple: [HTML](./Intermediate/12-dom-example.html) - [JS](./Intermediate/13-dom-example.js)
51+
* Ejemplo lista de tareas: [HTML](./Intermediate/14-tasklist.html) - [JS](./Intermediate/15-tasklist.js)
52+
* [Ejericios](./Intermediate/16-dom-exercises.js)
53+
4754
## Clases en vídeo
4855

4956
### Curso de fundamentos desde cero

0 commit comments

Comments
 (0)