No image available
Mastering DOM Manipulation: Unleash Your Browser's Power
Explore the essential concepts of the Window and Document objects in JavaScript, and learn how to manipulate HTML content and styles effortlessly!
Create Your Own Variations
Sign in to customize this poster and create unique variations. Adjust text, colors, and style to match your needs perfectly.
Prompt
Objeto Window - Representación: Representa la ventana del navegador. Es el objeto global en el contexto del navegador. - Funciones Clave: - alert() , confirm() , prompt() : Muestran mensajes al usuario. - setTimeout() , setInterval() : Permiten ejecutar código después de un tiempo determinado o en intervalos regulares. - location : Proporciona información sobre la URL actual y permite redirigir a otras páginas. - document : Contiene el objeto [Document](coco://sendMessage?ext=%7B%22s%24wiki_link%22%3A%22https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FDocument%22%7D&msg=Document) , que permite acceder y manipular el contenido HTML. Objeto Document - Representación: Representa el documento HTML cargado en la ventana del navegador. - Funciones Clave: - getElementById() , getElementsByClassName() , getElementsByTagName() : Permiten seleccionar elementos HTML del documento. - querySelector() , querySelectorAll() : Permiten seleccionar elementos HTML utilizando selectores CSS. - createElement() , createTextNode() , appendChild() : Permiten crear y añadir nuevos elementos HTML al documento. Manipulación del Contenido HTML 1. Acceder a Elementos: javascript let elemento = document.getElementById("miElemento"); 2. Cambiar Contenido: javascript elemento.innerHTML = "Nuevo contenido HTML"; //Permite insertar HTML elemento.textContent = "Nuevo texto"; //Inserta solo texto 3. Cambiar Valores de Atributos: javascript elemento.setAttribute("src", "nueva_imagen.jpg"); elemento.value = "Nuevo valor"; //Para inputs Manipulación de Estilos 1. Acceder a Estilos: javascript elemento.style.color = "red"; elemento.style.fontSize = "20px"; 2. Añadir/Remover Clases CSS: javascript elemento.classList.add("nuevaClase"); elemento.classList.remove("otraClase"); Mostrar y Ocultar Elementos 1. Cambiar la Visibilidad: javascript elemento.style.display = "none"; //Ocultar elemento.style.display = "block"; //Mostrar como bloque elemento.style.display = "inline"; //Mostrar en línea Nota: display: none elimina el elemento del flujo del documento, mientras que visibility: hidden solo lo oculta, pero sigue ocupando espacio. Ejemplo Completo html <!DOCTYPE html> <html> <head> <title>Ejemplo de Manipulación DOM</title> </head> <body> <h1 id="titulo">Título Original</h1> <button onclick="cambiarTitulo()">Cambiar Título</button> <script> function cambiarTitulo() { let titulo = document.getElementById("titulo"); titulo.textContent = "¡Título Cambiado!"; titulo.style.color = "blue"; } </script> </body> </html> Resumen para el Póster - Window : Objeto global que representa la ventana del navegador. - Document : Representa el HTML cargado. - Manipulación: - Acceder a elementos por ID, clase, etiqueta. - Cambiar contenido con innerHTML o textContent . - Modificar estilos directamente o mediante clases CSS. - Ocultar/mostrar elementos con display .
