Embedded Files
Document Object Model (DOM)
Seleccionar Elementos
document.getElementById('Identificador');
Cambiar el Valor de un atributo o propiedad
elemento.atributo=valor;
Atributo o propiedades básicas.
textContent: Obtiene o establece el contenido textual del elemento.
innerHTML: Obtiene o establece el contenido HTML del elemento.
Estructura General para establecer:
elemento.textContent = "Texto";
elemento.innerHTML = "<i>Codigo html</i>";
Ejemplos:
<html>
<head>
<title>Página Web JAG 3.2</title>
</head>
<body>
<h1>Ejemplo 3.2</h1>
<i id="id1">AAA</i>
<b id="id2">BBB</b>
<u id="id3">CCC</u>
<p id="id4">DDD</p>
<script>
var el1=document.getElementById("id1");
var el2=document.getElementById("id2");
var el3=document.getElementById("id3");
var el4=document.getElementById("id4");
el1.textContent="Los estudiantes del colegio JAG son los más inteligentes del país.";
el2.textContent="Los alumnos del colegio JAG se destacan como los más brillantes del país.";
el3.innerHTML="<b>Los estudiantes </b> del colegio <i>JAG</i> son los mejores!";
el4.innerHTML="Los estudiantes del colegio <b>JAG</b> son los <sup>mejores</sup> en deporte a nivel <sub>nacional</sub>. ";
</script>
</body>
<html>
Actividad 3.2A
La siguiente página que crearás te permitirá ingresar y mostrar tu nombre, actividad o deporte favorito, y película favorita. Utiliza prompt() para capturar estos datos y actualiza los elementos de la página con la información proporcionada.
Crea una nueva página HTML como el ejemplo anterio con el nombre "Act32A",
Agregar dentro del body:
<h1>Act32A</h1>
<b>Estudiante</b>
<b id="id1">111</b>
<h2>Grado: </h2>
<u id="id2">222</u>
<h2>Edad: </h2>
<p id="id3">333</p>
Agregar dentro del script:
var elem1=document.getElementById("id1");
var elem2=document.getElementById("id2");
var elem3=document.getElementById("id3");
elem1.textContent="Pepito Perez";
elem2.textContent="9 A";
elem3.textContent=13;
Actividad 3.2B
En esta actividad, crearás una página donde interactuarás para cambiar el nombre del plato y dos ingredientes. Usando DOM y prompt() para ingresar y actualizar estos datos.
Crea una nueva página HTML como el ejemplo anterior con el nombre "Act32B",
Agregar dentro del body:
Colocar un título principal usando <h1> que diga Act32B:
<h1>Act32B</h1>
Agregar una etiqueta <b> con el identificador "np" que diga: Nombre del plato
<b id="np">Nombre del plato</b>
Añadir un subtítulo <h2> con el texto "Ingredientes:".
Colocar una etiqueta <b> con el identificador "ing1" que diga "ingrediente1".
Colocar una etiqueta <b> con el identificador "ing2" que diga "ingrediente2".
Agregar dentro del script:
Definir tres variables llamadas elem1, elem2 y elem3 para seleccionar los elementos con los identificadores "np", "ing1" y "ing2". respectivamente, utilizando document.getElementById() para obtener cada elemento del DOM. Como el siguiente:
var elem1=document.getElementById("np") ;
Cambiar el texto de elem1 utilizando textContent, con el valor "Arroz con huevo".
elem1.textContent="Arroz con huevo";
Cambiar el texto de elem2 y elem3 utilizando textContent, con los valores "Arroz"y "Huevo" respectivamente.
Page updated
Report abuse