getElementsByTagName JavaScript. Cambiar estilos CSS de nodos con style. Ejemplo y ejercicio (CU01128E)

Resumen: Entrega nº28 del curso "Tutorial básico del programador web: JavaScript desde cero".
Codificación aprenderaprogramar.com: CU01128E

 

 

GETELEMENTSBYTAGNAME

El acceso a un nodo concreto del DOM usando getElementById es muy frecuente, pero hay otras maneras de acceder a los nodos del DOM. Una de ellas es usando getElementsByTagName('etiquetaBuscada'). Esta función nos devuelve un array conteniendo todos los nodos DOM cuya etiqueta coincide con etiquetaBuscada.

 

logo javascript

 

El orden en que aparecerán los elementos en el array (comenzando con índice cero) es el mismo en el que aparezcan en el código de la página web. Ejemplo:

var elementosDiv = document.getElementsByTagName('div');

 

Nos devolverá un array con todos los nodos de tipo element cuya etiqueta sea div, empezando con índice cero: elementosDiv[0], elementosDiv[1], elementosDiv[2], elementos div[3] … hasta el índice que sea necesario para abarcar tantos elementos div como haya en el código. Podemos obtener los nodos de cualquier tipo de etiqueta: div, span, p, label, input, h1, h2, etc.

Tener en cuenta que escribimos document.getElementsByTagName('div') porque queremos empezar la búsqueda desde el nodo raíz del DOM, es decir, el nodo document (así exploramos todos los nodos). Podríamos empezar la búsqueda por otro nodo si resultara de interés.

 

 

CAMBIAR ESTILOS CSS CON JAVASCRIPT

Una posibilidad interesante de JavaScript será poder modificar de forma dinámica el aspecto de la web modificando el CSS asociado. La sintaxis para poder ejecutar modificaciones de estilo será la siguiente:

nodoDelDomAlQueAccedemos.style.nombrePropiedad = 'valorPropiedad';

 

 

Un ejemplo sería: elementosObtenidos[1].style.backgroundColor = '#FF9933';

Donde elementosObtenidos[1] corresponde a un nodo del DOM. Y backgroundColor es la propiedad CSS que deseamos cambiar pero expresada con sintaxis JavaScript. Si te fijas, la sintaxis CSS es background-color mientras que la sintaxis JavaScript es backgroundColor. En este caso son similares, pero no exactamente iguales. En otros casos sí hay coincidencia. Más adelante veremos una tabla de equivalencia entre propiedades CSS

Para ver la aplicación del acceso con getElementsByTagName y el cambio de propiedades CSS con JavaScript escribe el siguiente código y comprueba sus efectos al visualizar la página:

<!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>

 

 

El resultado esperado es que al cargar la página los elementos label del form se muestren con un color de fondo blanco. Al hacer click para escribir en el formulario, se mostrará cada uno de los elementos con un color de fondo ligeramente distinto porque así lo hemos establecido a través del código.

getElementsByTagName javascript

 

 

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?

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.

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

MAYO - JUNIO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación