Hola buenos dias
Cambia la expresion del emoji.
Cambia el tema de la página.
Haz aparecer o desaparecer el arbol
El DOM (siglas de Document Object Model, o Modelo de Objetos del
Documento) es una interfaz de programación para documentos HTML y XML.
Representa la estructura de una página web como un árbol de objetos,
permitiendo a los lenguajes de programación, como JavaScript, acceder a
los elementos del documento y manipular su contenido, estructura y
estilo de forma dinámica.
¿Cómo funciona el DOM?
Cuando un
navegador web carga una página HTML, crea internamente una
representación en memoria de esa página. Esta representación es el DOM y
sigue una estructura jerárquica de árbol.
Documento: Es el nodo raíz del árbol, que representa toda la página web.
Elementos:
Cada etiqueta HTML (como <body>, <h1>, <div>,
<p>) se convierte en un objeto, o nodo, dentro del árbol.
Atributos: Los atributos de las etiquetas (id, class, src, etc.) también se representan como nodos.
Contenido de texto: El texto dentro de las etiquetas también es un nodo.
¿Para qué sirve?
El DOM actúa como un puente entre la página web estática y el código de programación, permitiendo que los desarrolladores:
Modifiquen el contenido: Actualicen textos o imágenes sin recargar la página.
Cambien la estructura: Añadan, eliminen o reordenen elementos HTML.
Alteran el estilo: Cambien las propiedades CSS para modificar la apariencia de los elementos.
Manejen eventos: Reaccionen a las interacciones del usuario, como clics en botones o entradas de texto.
Ejemplo de manipulación del DOM
Imagina un documento HTML simple:
html
<!DOCTYPE html>
<html>
<body>
<h1 id="titulo">Hola, mundo</h1>
</body>
</html>
Usa el código con precaución.
Con JavaScript, podrías manipular este documento a través del DOM de la siguiente manera:
javascript
// Acceder al elemento con el id "titulo"
const tituloElemento = document.getElementById('titulo');
// Modificar el contenido del elemento
tituloElemento.textContent = '¡Hola, desde JavaScript!';
// Crear un nuevo párrafo
const nuevoParrafo = document.createElement('p');
nuevoParrafo.textContent = 'Este párrafo ha sido añadido con JavaScript.';
// Añadir el nuevo párrafo al cuerpo del documento
document.body.appendChild(nuevoParrafo);
Usa el código con precaución.
Este
código permite modificar el contenido del <h1> y añadir un nuevo
<p> sin necesidad de recargar la página, haciendo que el sitio web
sea interactivo y dinámico.
</p>
Este es el párrafo cuyo aspecto cambiará.