Que es el DOM

EL DOM ( Document Object Model ) es una representación estructurada en un HTML o XML como un árbol de objetos. Es la interfaz que permite a Javascript interactuar con el contenido ñ. Estructura y estilo de una página web.

Conceptos Claves:
1. Documento: La página HTML completa 
2. Nodos: Cada elemento del árbol DOM ( etiquetas, texto, atributos) 
3. Elementos: Los nodos que representan etiquetas HTML ( caja de texto, alert..) 
4. Árbol DOM: Estructura jerárquica dónde cada elemento tiene un padre y puede tener hijos 

2. ¿Para que se usa el DOM?
El DOM permite:
1. Modificar contenido: Cambiar texto, HTML interno 
2. Manipula estructura: Agregar, eliminar o mover elementos 
3. Cambiar estilos: Modificar CSS dinámicamente 
4. Responder a eventos: Clicks, formularios, teclado, etc 
5. Crear interactividad: Hacer páginas web dinámicas 

3. Estructura del DOM 
Document
HTML
Head
Title 
Meta 
Body 
Header 
Main 
Section 
Article 
Footer 

4. Seleccionar Elementos del DOM 
4.1 Métodos de Selección 
Javascript 
// Por ID ( devuelve UN elemento) 
Const elemento= documento 


 El DOM es una representación estructurada de un HTML O XML como un árbol de objetos. Es la interfaz que permite que JavaScript el contenido, estructura y estilo de una pagina web.





PREGUNTAS FECHA 22 julio

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

R= Se usa document.getElementById("id"), donde "id" es el valor del atributo id en el HTML.

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

R= *document.getElementsByClassName("clase") → devuelve una colección de elementos.

*document.querySelector(".clase") → devuelve el primer elemento que coincida.

Para que sirve la palabra reservada const.

R= Se usa para declarar variables cuyo valor no debe cambiar. Es una constante.

Para que sirve la palabra reservada document.

R= Es un objeto que representa todo el contenido HTML. Se usa para acceder, modificar o manipular elementos de la página web.

Como se puede modificar una regla css desde javascript?

R=Usando la propiedad style del elemento.

¿Cuántas maneras conoce para invocar una función desde un clic?

R= En HTML: usando el atributo onclick.

En JavaScript: usando addEventListener.

¿Qué eventos se pueden adicionar a un elemento?

R= click (clic del mouse)

mouseover (pasar el mouse por encima)

mouseout (sacar el mouse)

keydown (presionar una tecla)

submit (enviar un formulario)

change (cuando cambia un valor)

Tomar captura de pantalla de: Ejecución y Código.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<input type="button" value="boton ejemplo" id="idboton" onclick="cambiarcss()">
<style>
    #idboton
    {
        color: blue;
      background: white;
        border-radius: 0px;
    }
</style>

<script>
    console.log("modificar reglas css")

    function cambiarcss()
    {
    document.querySelector("#idboton").style.color="black"
    document.querySelector("#idboton").style.borderRadius = "100px"
    document.querySelector("#idboton").style.blackgroundColor="blue"
       }
       function funcion1()
       
console.log("mouse enter")
console.log("ha entrado el cursor al boton");


  }
function funcion2()
{
    console.log("el cursor ha dejado el elemento");
}
function funcion3()
{
    console.log("click derecho")
 }
       const btn=document.getElementById("idboton")
       btn.addEventListener('click', cambiarcss)
       btn.addEventListener('mouseenter', funcion1)
       btn.addEventListener('mouseleave', funcion2)
       btn.addEventListener('contextmenu', funcion3)

       

</script>    
</body>
</html>






QuerySelector: Asi como se puedene referencia elementos en html tambien se pueden referenciar reglas css 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="cambiar" onclick="modificar()" id="botonestilo">
    <input type="text" name="" id="idcajadetexto">

    <style>
        #botonestilo {
            background-color: aqua;
        }
    </style>

    <script>
        console.log("esta en java script")

        function modificar() {
            console.log("en funcion modificar")
            document.querySelector("#botonestilo").style.backgroundColor = "yellow"
            document.querySelector("#botonestilo").style.borderRadius = "100px"

            const elemento = document.getElementById("idcajadetexto");
            elemento.value = "se ha oprimido el boton"
        }
    </script>
</body>

ACIVIDDAD 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mostrar Imagen con DOM</title>

  <style>
    /* Estilo para el botón */
    #BTN {
      color: red;
      background-color: yellowgreen;
      border-radius: 1000px;
      padding: 20px 20px;
      font-size: 20px;
      cursor: pointer;
    }

    /* Estilo para la imagen */
    #imagen {
      display: none;
      margin-top: 60px;
      border: 2px solid #c41010;
    }
  </style>
</head>

<body>

  <!-- Botón -->
  <input id="BTN" type="button" value="Toca aquí" />

  <!-- Imagen que se mostrará al pasar el mouse -->
  <img
    id="imagen"
    src="https://cdn.pixabay.com/photo/2025/01/07/21/44/cats-9317796_1280.jpg"
    alt="Imagen de ejemplo"
  />

  <!-- Script para interactividad -->
  <script>
    // Obtener los elementos por su ID
    var btn = document.getElementById("BTN");
    var img = document.getElementById("imagen");

    // Mostrar la imagen cuando el mouse entra en el botón
    btn.addEventListener("mouseenter", function() {
      img.style.display = "block";
    });

    // Ocultar la imagen cuando el mouse sale del botón
    btn.addEventListener("mouseleave", function() {
      img.style.display = "none";
    });
  </script>

</body>
</html>       
























Mostrar Imagen con DOM Imagen de ejemplo

Comentarios

Publicar un comentario

Entradas más populares de este blog

CARRUSEL CON DOM

Imagen
<! DOCTYPE html > < html lang = "es" > < head >   < meta charset = "UTF-8" >   < title > Carrusel Natural </ title >   < style >     body {       text-align : center ;       font-family : 'Segoe UI' , sans-serif ;       background-color : #eef2f3 ;     }     #carrusel {       margin : 40px auto ;       width : 320px ;       height : auto ;       padding : 10px ;       background-color : #fff ;       border : 3px solid #2b6777 ;       border-radius : 10px ;       box-shadow : 0px 4px 10px rgba ( 0 , 0 , 0 , 0.15 );     }     #carrusel img {       width : 300px ;       height : 200px ;       display : none ;       object-fit : cover ;     ...
Leer más

COMPONENTES EN RACK

Imagen
 DEFINICIONES Y IMAGENES  ROUTER  ROUTER ES UN DISPOSITIVO DE RED DE CABLEADO ETHERNET EL CUA USA PUERTOS RJ45 PARA INTERNET CONECTAR HOST MEDIANTES IDENTIFICACION POR DIRECCIONES IPV4,  CADA HOST DEBE TENER CADA DIRECCION IP DIFERENETS USUALEMNETE PARA REALIZAR SU CONFIGURACION SE HAVE MEDIANTE LA PUERTA DE ENLANCE DETERMINADA. TIENE UN PUERTO U ITO WAN Y PUEDE TENER VARIOS PUERTOS ETHENET PATA INTERCONECATR LOS DISPOSTIVOS.  TAMBIEN REALIZA INTERONECCION DE DISPOSTIVOS A TRAVES DE WIFI  DIBUjAR DISPOSITIVO  RACK ES UN GABINITE QUE TIENE LA POSIBILIDAD DE SOSTENER Y ALBERGAR DISPOSITIVOS DE RED panel de conexion  Es una conexión que se realiza antes de que salgan las conexiones hacia las canaletas de red. switch  Dispositivo de red que realiza conexion entre dispositivos a través de direcciones física MAC, se encuentre en el rack y usualmente se encuentra dispuesto despues de la conexion de router. cord: cable que realiza inrerconexiones ent...
Leer más

Ciclo do while

Imagen
Es una estructura de control repetitiva la cual primero realiza las acciones y luego se evalúa una expresión lógica, si la expresión lógica resulta verdadera, entonces se vuelve a repetir el ciclo mientras que la expresión lógica sea verdadera. Diseñar una aplicación que cuente la cantidad de veces un nombre por consola, los datos de # de veces y nombre deben solicitarse por gui. Diseñar una aplicación que solicite al usuario numero inicial y numero final y calcule los números pares entre los dos números.
Leer más