Embedded Files
Document Object Model (DOM)
"Modelo de Objeto del Documento", es una representación estructurada de un documento HTML o XML, donde cada parte del documento se trata como un objeto que se puede manipular mediante programación.
Seleccionar Elementos del html
document.getElementById('Identificador');
Con el código getElementById en JavaScript, se puede seleccionar un elemento por su ID para realizar modificaciones o interacciones, como cambiar su contenido, estilo o atributos, y añadir eventos para mejorar la interactividad de la página web.
Cambiar el Valor de un atributo o propiedad
Para cambiar el valor de un atributo o propiedad de un elemento, usa
elemento.atributo
<img id="im1" src="https://lc.cx/rK8Iq4" width="10" height="20" >
<img id="im2" src="https://lc.cx/rK8Iq4" width="10" >
<script>
document.getElementById("im1").width = 100;
document.getElementById("im2").height = 50;
document.getElementById("im1").src = "https://www.joseantoniogalanpereira.edu.co/galeria_fotos/2.jpg";
</script>
En el ejemplo anterior, podemos optimizar el código utilizando variables para almacenar el elemento. Luego, podemos usar esa variable para modificar el ancho, la altura y la fuente de la imagen "src". Esto hace que el código sea más limpio y fácil de entender.
<img id="im1" src="https://lc.cx/rK8Iq4" width="10" height="20" >
<img id="im2" src="https://lc.cx/rK8Iq4" width="10" height="20" >
<script>
var el1=document.getElementById("im1");
var el2=document.getElementById("im2");
el1.width = 100;
el1.height = 50;
el1.src = "https://acortar.link/GDcjdu";
el2.width = 100;
el2.height = 50;
</script>
Ejemplos: Guardar en un documento de texto con el nombre Ej32
<html>
<head>
<title>DOM</title>
</head>
<body>
<img id="id1" src="https://lc.cx/rK8Iq4" width="50" height="100" >
<img id="id2" src="https://lc.cx/rK8Iq4" width="50" height="100" >
<img id="id3" src="https://lc.cx/rK8Iq4" width="50" height="100" >
<script>
var el1=document.getElementById("id1");
var el2=document.getElementById("id2");
var el3=document.getElementById("id3");
el1.width = 200;
el1.height = 150;
el1.src = "https://www.joseantoniogalanpereira.edu.co/galeria_fotos/1.jpg";
el2.width = 400;
el2.height =140;
el2.src = "https://www.joseantoniogalanpereira.edu.co/galeria_fotos/2.jpg";
el3.width = 80;
el3.height = 40;
el3.src = "https://www.joseantoniogalanpereira.edu.co/galeria_fotos/3.jpg";
</script>
</body>
<html>
Actividad 3.1A
Crea una nueva página HTML como el ejemplo anterio con el nombre "Act31A",
Agregar dentro del body:
<h1>Act31A</h1>
<p>Fotos del Colegio JAG</p>
<img id="id1" src="https://lc.cx/nTpKW7" width="50" height="50" >
<img id="id2" src="https://lc.cx/nTpKW7" width="50" height="50" >
<img id="id3" src="https://lc.cx/nTpKW7" width="50" height="50" >
Agregar dentro del script:
var el1=document.getElementById("id1");
var el2=document.getElementById("id2");
var el3=document.getElementById("id3");
el1.width=50;
el1.height=40;
el1.src="https://www.joseantoniogalanpereira.edu.co/galeria_fotos/5.jpg";
el2.width=100;
el2.height=80;
el2.src="https://www.joseantoniogalanpereira.edu.co/galeria_fotos/6.jpg";
Agrega los comandos para que la imagen 3 con el id "id3" también tenga cambios en su ancho y alto.
Actividad 3.1B
Crea una nueva página HTML como el ejemplo anterio con el nombre "Act31B".
Dentro del archivo HTML, agrega los siguientes elementos en la parte del cuerpo (<body>):
Un título de nivel 1 (<h1>) con el texto "Act31B".
Un párrafo (<p>) que diga "Fotos de deportes:".
Cuatro imágenes con un tamaño inicial pequeño (ancho 60 px, alto 60 px), cada una con un identificador único: id1, id2, id3 y id4.
En la parte del script (<script>):
Usa JavaScript para cambiar el tamaño de todas las imagenes por:
Imagen 1: 20x40
Imagen 2: 40x80
Imagen 3: 80x160
Imagen 4: 160x320
Usa JavaScript para cambiar la fuente (URL) de todas las imagenes por los siguientes enlaces.
"https://lc.cx/PzuuX4"
"https://lc.cx/6F5327"
"https://lc.cx/KZDpsu"
"https://lc.cx/9veSFl"
Page updated
Report abuse