Dom

El DOM (Modelo de Objetos del Documento) es una representación estructurada de un documento HTML o XML como un árbol de objetos. Es la interfaz que permite a JavaScript interactuar con el contenido, la estructura y el estilo de una página web. 

CONCEPTOS CLAVE:

 

Documento: La página HTML completa 

Nodos: cada elemento del árbol DOM (etiquetas, texto, atributos)

Elementos: Nodos que representan etiquetas HTML

Árbol DOM: Estructura jerárquica donde cada elemento tiene un padre y puede tener hijos. 

2. ¿Para qué se utiliza el DOM?

El DOM permite:

Modificar contenido: cambiar texto, HTML interno 

Manipular la estructura: agregar, eliminar o mover elementos

Cambiar estilos: modificar CSS dinámicamente 

Responder a eventos: Clics, formulario, teclado, etc.

Crear interactividad: crear páginas web dinámicas

Como se selecciona un elemento por id desde html en javascript?

R/ Document.getElementById ("nombre del id")

Como se selecciona un elemento por clase desde html en java script?

R/ Document.getElementByClassName ("nombre de la clase")

Para que sirve la palabra reservada const.

R/ Para declarar un elemento o una variable 

Para que sirve la palabra reservada document.

R/ Para interactuar con el contenido de una pagina Web

CODIGO DOM Y JAVA SCRIPT

FUNCIONAMIENTO

DESCRIPCION

1. HTML (Estructura de la pagina):

   • Se define un botón con el texto "cambiar".

   • El botón tiene un identificador (ID) llamado botonestilo, y cuando se hace clic en él, se llama a una función de JavaScript llamada modificar().

2. Css (estilo de boton):

   • Se define un estilo dentro de la etiqueta <style>.

   • Se usa el ID #botonestilo para cambiar el color de fondo del botón a aqua cuando se carga la página.

3. JavaScript (como se comporta el boton):

   • Al principio, imprime un mensaje en la consola: "esta en java script".

   • Luego se define la función modificar():

     • Esta función se activa cuando se hace clic en el botón.

     • Cambia el color de fondo del botón a amarillo.

     • También cambia los bordes del botón, haciéndolos más redondeados con un radio de 100 pixeles

¿ Que funcionamiento tiene el botón al darle clic nuevamente ?

Cuando el usuario hace clic en el botón:

• Su color de fondo cambia de aqua a amarillo

• Sus bordes se vuelven redondeados.