Autor Tema: Javascript getElementsByTagName ejercicios resueltos codificación ejemp CU01128E  (Leído 2715 veces)

reyescorpion

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Ante todo un cordial saludo. He realizado el ejercicio CU01128E del tutorial de programación de desarrllo web de aprenderaprogramar y me gustaria saber si lo hice bien o hay una mejor forma de hacerlo. Agradeceria mucho su feedback.

 Para la realizacion de este ejercicio se verificó su funcionamiento en los navegadores Chrome y Mozilla

Código Original de la funcion:

 
Código: [Seleccionar]
   <!DOCTYPE html>

<html>

<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title>
<meta charset="utf-8">

<style type="text/css">
body {background-color:white; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
</style>

<script type="text/javascript">

function cambiarAspecto(elemento) {
var elementosObtenidos = document.getElementsByTagName(elemento);
elementosObtenidos[0].style.backgroundColor = '#FF6633';
elementosObtenidos[1].style.backgroundColor = '#FF9933';
elementosObtenidos[2].style.backgroundColor = '#FFCC33';

}
</script>

</head>
<body>

<div id="cabecera">

<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>

<!-- Formulario de contacto -->

<div style="width:450px;">

<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html" onclick="cambiarAspecto('label')">

<p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>

<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>

<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>

<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label>

<label>

<input type="submit" value="Enviar">

<input type="reset" value="Cancelar">

</label>

</form>

</div>

</body>

</html>


Plateamiento del Ejercicio


Modifica el código anterior para que en vez de pasarse como parámetro label pases como parámetro: div, input, h1 y h2. ¿Se usan los tres índices del array en todos los casos? ¿Qué ocurre si aparecen más índices que elementos realmente existen en el documento html?


Respuesta:
 ¿Se usan los tres índices del array en todos los casos?
En div se utilizan 2 indices,
En Input se utilizan los 3 indices
En h1 se utilizan 1 indice
En h2 se utilizan 1 indice
 ¿Qué ocurre si aparecen más índices que elementos realmente existen en el documento html?
     Al ser elementos no definidos se produce un error en javascript pero no arrojan ningún valor.

Modifica el código anterior para introducir div que simule un botón con el texto “Cambiar a Inglés” y otro div simulando un botón “Cambiar a español”. Al pulsar sobre el botón cambiar a inglés, debes acceder a los nodos del DOM de tipo label y usando relaciones de parentesco entre nodos acceder a aquellos nodos cuyo nodeValue es Nombre:, Apellidos:, y Correo electrónico: y cambiar su nodeValue por Name:, Surname: y e-mail:.

Orientación: tendrás que conocer la estructura del DOM para poder acceder a los nodos con el contenido texto que nos interesa, ya que estos nodos son descendientes de los nodos label.


Respuesta:

Código: [Seleccionar]

<!DOCTYPE html>

<html>

<head>

   <title>Ejemplo DOM - aprenderaprogramar.com</title>

   <meta charset="utf-8">

   <style type="text/css">

        body {background-color:white; font-family: sans-serif;}

        label {color: maroon; display:block; padding:5px;}
       
        .idioma {
            display: inline-block;
           
        }
       
        .first {
            margin-right: 10px;
            margin-left: 10px;
           
        }
       

        .first, .second {
            width:150px;
            border: 2px solid black;
            display: inline-block;
            text-align: center;
            background-color: #33FFCA;
            border-radius: 5px;

        }

       
   </style>

<script type="text/javascript">

function cambiarAspecto(elemento) {

var elementosObtenidos = document.getElementsByTagName(elemento);

elementosObtenidos[0].style.backgroundColor = '#FF6633';

elementosObtenidos[1].style.backgroundColor = '#FF9933';

elementosObtenidos[2].style.backgroundColor = '#FFCC33';

}


function changeEnglish(elemento1,elemento2) {

   let elementosObtenidos = document.getElementsByTagName(elemento1);
    elementosObtenidos[0].firstChild.firstChild.nodeValue ="Name" ;
    elementosObtenidos[1].firstChild.firstChild.nodeValue ="Surname" ;
    elementosObtenidos[2].firstChild.firstChild.nodeValue ="E-mail" ;

    let elementosTexto = document.getElementsByTagName(elemento2);
        elementosTexto[0].firstChild.nextSibling.firstChild.nodeValue ="Web portal to learnprogramming.com";
        elementosTexto[0].firstChild.nextSibling.nextSibling.nextSibling.firstChild.nodeValue = "Didactic and divulgation of programming";
        elementosTexto[1].firstChild.nextSibling.firstChild.nextSibling.firstChild.nodeValue= "If you want to contact us send us this completed form:";

}


function changeSpanish(elemento1,elemento2) {

let elementosObtenidos = document.getElementsByTagName(elemento1);
 elementosObtenidos[0].firstChild.firstChild.nodeValue ="Nombre" ;
 elementosObtenidos[1].firstChild.firstChild.nodeValue ="Apellido" ;
 elementosObtenidos[2].firstChild.firstChild.nodeValue ="Correo" ;

 let elementosTexto = document.getElementsByTagName(elemento2);
        elementosTexto[0].firstChild.nextSibling.firstChild.nodeValue ="Portal web aprenderaprogramar.com";
        elementosTexto[0].firstChild.nextSibling.nextSibling.nextSibling.firstChild.nodeValue = "Didáctica y divulgación de la programación";
        elementosTexto[1].firstChild.nextSibling.firstChild.nextSibling.firstChild.nodeValue= "Si quieres contactar con nosotros envíanos este formulario relleno:";

}

</script>

</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>

<!-- Formulario de contacto -->

<div style="width:450px;">

<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html" onclick="cambiarAspecto('input')">

<p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>

<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>

<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>

<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label>

<label>

<input type="submit" value="Enviar">

<input type="reset" value="Cancelar">

</label>


</form>
<br>
<div class = "idioma">
    <div  class='first'  onclick="changeEnglish('label','div')">Cambiar a Inglés</div>
    <div class='second'  onclick="changeSpanish('label','div')"> Cambiar a Español</div>
</div>

</div>

</body>

</html>
   

« Última modificación: 29 de Octubre 2020, 18:17 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola, el ejercicio está bien resuelto. Pueden verse algunos comentarios interesantes sobre este ejercicio en https://aprenderaprogramar.com/foros/index.php?topic=3269.0
Saludos.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".