Principiantejavascript
Manipulacion del DOM
Aprende a interactuar con el DOM: seleccionar elementos, modificar contenido y manejar eventos.
Que es el DOM
El DOM (Document Object Model) es una representacion en forma de arbol de la estructura HTML de una pagina web. Cada elemento se convierte en un nodo que JavaScript puede manipular.
Seleccionar elementos
Los metodos mas recomendados son
querySelector() y querySelectorAll().javascript
1const titulo = document.querySelector("h1");
2const boton = document.querySelector("#miBoton");
3const tarjeta = document.querySelector(".card");
4
5const items = document.querySelectorAll(".lista-item");
6items.forEach(item => {
7 console.log(item.textContent);
8});Modificar contenido y estilos
Puedes cambiar el texto, el HTML interno y los estilos CSS de cualquier elemento de forma programatica.
javascript
1const titulo = document.querySelector("h1");
2titulo.textContent = "Nuevo Titulo";
3titulo.innerHTML = "Titulo con <em>enfasis</em>";
4
5titulo.style.color = "blue";
6titulo.classList.add("activo");
7titulo.classList.toggle("destacado");Eventos
Los eventos permiten que tu codigo reaccione a interacciones del usuario. Se registran con
addEventListener().javascript
1const boton = document.querySelector("#enviar");
2
3boton.addEventListener("click", (event) => {
4 event.preventDefault();
5 console.log("Boton presionado");
6});
7
8const input = document.querySelector("#buscar");
9input.addEventListener("input", (e) => {
10 console.log("Escribiste:", e.target.value);
11});Prueba lo aprendido
Escribe código JavaScript y ejecútalo directamente en el navegador.
Editor de Códigojavascript
1const titulo = document.querySelector("h1");
2const boton = document.querySelector("#miBoton");
3const tarjeta = document.querySelector(".card");
4
5const items = document.querySelectorAll(".lista-item");
6items.forEach(item => {
7 console.log(item.textContent);
8});