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:
<!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:
<!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>
Tema: Javascript getElementsByTagName ejercicios resueltos codificación ejemp CU01128E (Leído 2588 veces)
RSS -
WAP2