reto en la clase DOM
El DOM (Document Object Model) es una estructurada representación de un documento 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.
ACTIVIDAD.
Mostrar imagen con evento
Conceptos clave:
Documento: La página HTML completa
Nodos: Cada elemento del árbol DOM (etiquetas, texto, atributos)
Elementos: Los nodos que representan etiquetas HTML
Árbol DOM: Estructura jerárquica donde cada elemento tiene un padre y puede tener hijos
2. ¿Para qué se usa el DOM?
EL DOM permite:
Modificar contenido: Cambiar texto, HTML interno
Estructura manipuladora: Agregar, eliminar o mover elementos.
Cambiar estilos: Modificar CSS dinámicamente
3.Estructura del DOM
documento
documento
—html
-cabeza
l—título
L meta
Cuerpo L bb
Yo—encabezado
-principal
-sección
Artículo L
-pie de página
Como se selecciona un elemento por id desde html en javascript?
RTA usando documento.getelementbyld("id")
Como se selecciona un elemento por clase desde html en java script?
Para que sirve la palabra reservada const
Para que sirve la palabra reservada document
Como se puede modificar una regla css desde javascript?
¿Cuantas maneras conoce para invocar una función desde un click?
RTA con document.getElementsByclassName("clase")document.queryselector (".clase").
RTA para declarar variedades que no se pueden reasignar, aunque si se puede modificar su contenido si es objeto
RTA representa todo la pagina HTML, 7 permite acceder y modificar su contenido
RTA usando .style.propiedad="valor
RTA usando onclick en HTMLcon .addEventlistener("click"funcion)en JSasignando directmente con element.onclick= funcion.¿Que eventos se pueden adicionar a un elemento?
RTA click,dblclick,mauseenter /mauseleave,keydonwn/
Tomar captura de pantalla de: Ejecución y Código.
Mediante el uso del DOM:
Los objetos html tienen un característica en la regla display la cual es none, mediante un botón realizar lo siguiente; al pasar el cursor por encima del botón mostrar una imagen al quitar el cursor la imagen debe desaparecer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Mostrar Imagen con Hover</title>
<style>
#idboton {
color: blue;
border-radius: 0px;
background-color: aliceblue;
}
#imagen {
display: none; /* Oculta la imagen inicialmente */
margin-top: 20px;
width: 200px;
}
</style>
</head>
<body>
<input id="idboton" type="button" value="BOTON EJEMPLO" />
<!-- Imagen oculta inicialmente -->
<img id="imagen" src="https://cdn.pixabay.com/photo/2017/07/24/11/52/peles-castle-2534375_1280.jpg" alt="Imagen de ejemplo"/>
<script>
console.log("MODIFICAR REGLAS CSS");
function cambiarcss() {
const boton = document.querySelector("#idboton");
boton.style.color = "black";
boton.style.borderRadius = "100px";
boton.style.backgroundColor = "blue";
}
function funcion1() {
console.log("mouse enter");
document.getElementById("imagen").style.display = "block";
}
function funcion2() {
console.log("El cursor ha dejado el elemento");
document.getElementById("imagen").style.display = "none";
}
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>
Comentarios
Publicar un comentario