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