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