TAICord

)
Text Texto dentro de elementos
Attribute Atributos (menos usado directamente)

⚠️ TRAMPA:

innerText y textContent trabajan con nodos de tipo Text

⸻

🔎 3. ACCESO A ELEMENTOS (SELECCIÓN)

🔹 Clásicos (legacy pero preguntables)

document.getElementById("id")
document.getElementsByClassName("clase")
document.getElementsByTagName("div")

📌 Devuelven:
• getElementById → 1 elemento
• los otros → HTMLCollection (no array real)

⸻

🔹 Modernos (MUY IMPORTANTES)

document.querySelector("div.clase")
document.querySelectorAll("div.clase")

•	querySelector → 1 elemento
•	querySelectorAll → NodeList

⚠️ TRAMPA:
• NodeList ≠ HTMLCollection
• NodeList puede ser estático
• HTMLCollection suele ser live (dinámico)

⸻

🔗 4. NAVEGACIÓN EN EL DOM (CLAVE TAI)

🔹 Acceso a hijos

element.childNodes // TODOS (incluye texto y espacios)
element.children // SOLO elementos HTML

element.firstChild // puede ser texto ⚠️
element.firstElementChild // solo elementos

element.lastChild
element.lastElementChild

⸻

🔹 Acceso a hermanos

element.nextSibling
element.nextElementSibling

element.previousSibling
element.previousElementSibling

⸻

🔹 Acceso al padre

element.parentNode
element.parentElement

⚠️ TRAMPA:
• parentNode puede devolver nodos no elemento
• parentElement solo devuelve elementos HTML

⸻

📌 5. ÍNDICES Y COLECCIONES (MUY EXAMENABLE)

element.children[0]
element.children[1]

•	Índices empiezan en 0
•	children → array-like

⚠️ TRAMPA:

childNodes[0]

👉 puede ser un nodo de texto (espacio en blanco)

⸻

✏️ 6. MODIFICACIÓN DEL DOM

🔹 Cambiar contenido

element.innerHTML // interpreta HTML
element.textContent // solo texto (más seguro)

⚠️ TRAMPA:
• innerHTML → riesgo XSS
• textContent → no interpreta HTML

⸻

🔹 Cambiar atributos

element.setAttribute("class", "nueva")
element.getAttribute("class")
element.removeAttribute("class")

⸻

➕ 7. CREACIÓN Y AÑADIDO DE NODOS

🔹 Crear

const nuevo = document.createElement("div")
const texto = document.createTextNode("Hola")

⸻

🔹 Añadir (CLAVE EXAMEN)

padre.appendChild(nuevo)

👉 Añade al final

⸻

🔹 Otros métodos importantes

padre.append(nuevo) // moderno
padre.prepend(nuevo) // al inicio

padre.insertBefore(nuevo, referencia)

⸻

❌ 8. ELIMINACIÓN Y REEMPLAZO

padre.removeChild(hijo)

element.remove() // moderno

padre.replaceChild(nuevo, viejo)

⸻

⚡ 9. EVENTOS (RELACIONADO CON DOM)

element.addEventListener("click", funcion)

📌 Tipos comunes:
• click
• input
• change
• submit

⸻

⚠️ 10. TRAMPAS TÍPICAS TAI

💀 Muy frecuentes:
• firstChild → puede ser texto (espacios)
• childNodes → incluye nodos invisibles
• HTMLCollection ≠ array (no .map)
• appendChild → mueve nodo si ya existe (NO duplica)

⸻

🧠 11. REGLAS DE ORO (MEMORIZACIÓN)
• children → elementos
• childNodes → TODO
• firstElementChild > firstChild
• appendChild → final
• prepend → inicio
• querySelector → moderno y flexible

⸻

🎯 12. MINI BATERÍA TIPO EXAMEN (TAI)

¿Qué devuelve firstChild en un elemento HTML con espacios?
a) Primer elemento hijo
b) Primer nodo (puede ser texto) ✅
c) Siempre null
d) Siempre elemento

⸻

¿Qué método añade un nodo al final de un elemento?
a) insertBefore
b) appendChild ✅
c) prepend
d) addNode

⸻

¿Cuál devuelve solo elementos HTML?
a) childNodes
b) children ✅
c) firstChild
d) nodeList

⸻

¿Qué diferencia clave hay entre innerHTML y textContent?
a) Ninguna
b) innerHTML no modifica contenido
c) textContent no interpreta HTML ✅
d) innerHTML solo funciona en XML

⸻

¿Qué ocurre si haces appendChild con un nodo existente?
a) Se duplica
b) Se elimina
c) Se mueve ✅
d) Error

⸻

Si quieres, el siguiente nivel sería 🔥:
• Quizcord CSV con 25 preguntas de DOM (muy estilo examen real)
• o una píldora combinada DOM + BOM + eventos avanzada (nivel trampa dura)