SOLUCION EJERCICIOS DOM A partir de la página web proporcionada y utilizando las funciones DOM, mostrar por pantalla la siguiente información: - Número de enlaces de la página - Dirección a la que enlaza el penúltimo enlace - Numero de enlaces que enlazan a http://prueba - Número de enlaces del tercer párrafo window.onload = function() { var info = document.getelementbyid("informacion"); // Numero de enlaces de la pagina var enlaces = document.getelementsbytagname("a"); info.innerhtml = "Numero de enlaces = "+enlaces.length; // Direccion del penultimo enlace var mensaje = "El penultimo enlace apunta a: "+enlaces[enlaces.length-2].href; info.innerhtml = info.innerhtml + "<br/>" + mensaje; // Numero de enlaces que apuntan a http://prueba var contador = 0; for(var i=0; i<enlaces.length; i++) { // Es necesario comprobar los enlaces http://prueba y // http://prueba/ por las diferencias entre navegadores if(enlaces[i].href == "http://prueba" enlaces[i].href == "http://prueba/") { contador++; info.innerhtml = info.innerhtml + "<br/>" + contador + " enlaces apuntan a http://prueba" // Numero de enlaces del tercer párrafo var parrafos = document.getelementsbytagname("p"); enlaces = parrafos[2].getelementsbytagname("a"); info.innerhtml = info.innerhtml + "<br/>" + "Numero de enlaces del tercer párrafo = "+enlaces.length; Con <div id="informacion" style="border:thin solid silver; padding:.5em"></div><p>lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing elit</a>. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue,...</p> 1
Crea esta lista de enlaces, al pasar el ratón por encima,muestra la dirección a la cual apuntan en el editor de texto function mostrar(valor) { switch(valor) { case 1: document.getelementbyid("eltexto").value = document.getelementbyid("enlace1").href; case 2: document.getelementbyid("eltexto").value = document.getelementbyid("enlace2").href; case 3: document.getelementbyid("eltexto").value = document.getelementbyid("enlace3").href; default: document.getelementbyid("eltexto").value ="error"; <ul> <li><a href="http://www.adobe.com" id="enlace1" onmouseover="mostrar(1);">adobe</a></li> <li><a href="http://www.apple.com" id="enlace2" onmouseover="mostrar(2);">apple</a></li> <li><a href="http://www.ibm.com" id="enlace3" onmouseover="mostrar(3);">ibm</a></li> </ul> <input type="text" size="30" id="eltexto" /> 2
Crea 3 botones, al hacer clic, mostrar el valor mostrado en el botón en el editor de texto function mostrar(valor) { var texto; switch(valor) { case 1: texto = document.getelementbyid("boton1").value; case 2: texto = document.getelementbyid("boton2").value; case 3: texto = document.getelementbyid("boton3").value; default: texto = "error"; document.getelementbyid("eltexto").value="pulsado "+ texto; <input type="button" id="boton1" onclick="mostrar(1)" value="boton1"/> <input type="button" id="boton2" onclick="mostrar(2)" value="boton2"/> <input type="button" id="boton3" onclick="mostrar(3)" value="boton3"/> <input type="text" size="30" id="eltexto" /> 3
Crea 3 botones, al hacer clic, aplicar un fondo de página diferente function establecefondo(cual) { switch(cual){ case 1: document.getelementbyid("pagina").style.backgroundimage = "url(fondo1.jpg)"; case 2: document.getelementbyid("pagina").style.backgroundimage = "url(fondo2.jpg)"; case 3: document.getelementbyid("pagina").style.backgroundimage = "url(fondo3.jpg)"; <body id="pagina"> Selecciona un fondo de pantalla <button type="button" id="btn" onclick="establecefondo(1)">fondo imagen 1</button> <button type="button" id="btn" onclick="establecefondo(2)">fondo imagen 2</button> <button type="button" id="btn" onclick="establecefondo(3)">fondo imagen 3</button> </body> Modifica los estilos que se enumeran a continuación - Aumenta el tamaño de la fuente de toda la página - Tamaño normal - Cambia el color del fondo - Color normal - Aumenta el tamaño de la fuente solo de esta sección - Tamaño normal - Cambia el color del fondo de esta sección - Color normal - Cambia el tipo de fuente empleada en esta sección al situar el ratón encima de este vínculo 4
function ModificoEstilo(cual) { switch(cual){ case 1: //Aumenta el tamaño de la fuente de toda la página document.body.style.fontsize='20px'; case 2: //Tamaño normal document.body.style.fontsize='16px'; case 3: //Cambia el color del fondo document.body.style.backgroundcolor='yellow'; case 4: //Color normal document.body.style.backgroundcolor='#cdcdcd'; case 5: //Aumenta el tamaño de la fuente solo de esta sección document.getelementbyid('ejemplo').style.fontsize='20px'; case 6: //Tamaño normal document.getelementbyid('ejemplo').style.fontsize='16px'; case 7: //Cambia el color del fondo de esta sección document.getelementbyid('ejemplo').style.backgroundcolor='yellow'; case 8: //Color normal document.getelementbyid('ejemplo').style.backgroundcolor='white'; // Cambia el tipo de fuente empleada en esta sección al situar el ratón encima de este vínculo case 9: document.getelementbyid('ejemplo').style.fontfamily='comic Sans MS'; //onmouseover case 10: document.getelementbyid('ejemplo').style.fontfamily='verdana'; //onmouseout 5
</head> <body id="pagina"> <p> Aumenta el tamaño de la fuente de toda la página<br /> Tamaño normal<br /> Cambia el color del fondo <br /> Color normal<br /> <section id="ejemplo"> Aumenta el tamaño de la fuente solo de esta sección<br /> Tamaño normal<br /> Cambia el color del fondo de esta sección<br /> Color normal <br /> Cambia el tipo de fuente empleada en esta sección al situar el ratón encima de este vínculo </section> </p> <br /><a href="#" onclick="modificoestilo(1)"; return false;>aumenta el tamaño de la fuente de toda la página</a> <br /><a href="#" onclick="modificoestilo(2)"; return false;>tamaño normal</a> <br /><a href="#" onclick="modificoestilo(3)"; return false;>cambia el color del fondo</a> <br /><a href="#" onclick="modificoestilo(4)"; return false;>color normal</a> <br /><a href="#" onclick="modificoestilo(5)"; return false;>aumenta el tamaño de la fuente solo de esta sección</a> <br /><a href="#" onclick="modificoestilo(6)"; return false;>tamaño normal</a> <br /><a href="#" onclick="modificoestilo(7)"; return false;>cambia el color del fondo de esta sección</a> <br /><a href="#" onclick="modificoestilo(8)"; return false;>color normal</a> <br /><a href="#" onmouseover="modificoestilo(9)" onmouseout="modificoestilo(10)">cambia el tipo de fuente empleada en esta sección al situar el ratón encima de este vínculo</a> </body> 6
</html> Completar el código JavaScript proporcionado para que cuando se pinche sobre el enlace se muestre completo el contenido de texto. Además, el enlace debe dejar de mostrarse después de pulsarlo por primera vez. <style type="text/css">.oculto { display: none;.visible { display: inline; </style> function muestra() { var elemento = document.getelementbyid("adicional"); elemento.classname = "visible"; var enlace = document.getelementbyid("enlace"); enlace.classname = "oculto"; <p id="texto">lorem ipsum eu odio. Praesent id metus... </p> <a id="enlace" href="#" onclick="muestra(); return false;">seguir leyendo</a> Realizar un script que cuando se pinche sobre el enlace Ocultar contenidos se oculte el texto y que en el enlace ponga Mostrar contenidos. Al pulsar Mostrar contenidos se muestre completo el contenido de texto. function muestraoculta() { var elemento = document.getelementbyid('contenidos1'); var enlace = document.getelementbyid('enlace1'); if(elemento.style.display == "" elemento.style.display == "block") { elemento.style.display = "none"; enlace.innerhtml = 'Mostrar contenidos'; else { elemento.style.display = "block"; 7
enlace.innerhtml = 'Ocultar contenidos'; </head> <body> <p id="contenidos1">[1] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p> <a id="enlace1" href="#" onclick="muestraoculta();">ocultar contenidos</a> NOTA: Versio2. Realizar el mismo ejercicio anterior pero ahora en la página se muestran 3 bloques de texto como el del ejercio anterior. function muestraoculta(id) { var elemento = document.getelementbyid('contenidos_'+id); var enlace = document.getelementbyid('enlace_'+id); if(elemento.style.display == "" elemento.style.display == "block") { elemento.style.display = "none"; enlace.innerhtml = 'Mostrar contenidos'; else { elemento.style.display = "block"; enlace.innerhtml = 'Ocultar contenidos'; </head> <body> <p id="contenidos_1">[1] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. 8
Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p> <a id="enlace_1" href="#" onclick="muestraoculta('1'); return false;">ocultar contenidos</a> <br/> <p id="contenidos_2">[2] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p> <a id="enlace_2" href="#" onclick="muestraoculta('2'); return false;">ocultar contenidos</a> <br/> <p id="contenidos_3">[3] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p> <a id="enlace_3" href="#" onclick="muestraoculta('3'); return false;">ocultar contenidos</a> 9
Realizar un script que cuando pulsemos en la opción otro se muestre el editor de texto <style type="text/css">.oculto { display: none;.visible { display: inline; </style> function mostrar() { document.getelementbyid("adicional").classname = "visible"; function nomostrar() { document.getelementbyid("adicional").classname = "oculto"; </head> <body> <form action="" method=""> Seleccione un curso <br /> <input type="radio" name="seleccion" id="selecciona" value="1" selected="selected" onclick="nomostrar()" />HTML<br /> <input type="radio" name="seleccion" id="selecciona" value="2" onclick="nomostrar()" />CSS<br /> <input type="radio" name="seleccion" id="selecciona" value="3" onclick="mostrar()" />Otro<br /> <div id="adicional" class="oculto" > Especifique: <input type="text" name="curso" size ="25" /><br /> </div> <input type="button" value="enviar"> </form> Realizar un scrit para que se añadan nuevos elementos a la lista cada vez que se pulsa sobre el botón. 10
function anade() { var elemento = document.createelement("li"); var texto = document.createtextnode("elemento de prueba"); elemento.appendchild(texto); var lista = document.getelementbyid("lista"); lista.appendchild(elemento); var nuevoelemento = "<li>texto de prueba</li>"; lista.innerhtml = lista.innerhtml + nuevoelemento; </head> <body> <ul id="lista"> <li>lorem ipsum dolor sit amet</li> <li>consectetuer adipiscing elit</li> <li>sed mattis enim vitae orci</li> <li>phasellus libero</li> <li>maecenas nisl arcu</li> </ul> <input type="button" value="añadir elemento" onclick="anade();"> 11