JavaScript: acceder a elementos por id. getElementById. Document.all. Cambiar imagen img src (CU01127E)

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

 

 

ACCEDER A ELEMENTOS JAVASCRIPT

Podemos acceder a los nodos del DOM (Document Object Model) usando JavaScript y los índices de array y relaciones padre – hijo – hermanos (parent, chidNodes, siblings), pero en general nos será más útil poder acceder directamente a aquel nodo que nos resulte de interés. JavaScript proporciona varias funciones para el acceso directo a nodos.

 

logo javascript

 

ACCESO DIRECTO A NODOS

Las formas de acceder directamente a nodos con JavaScript podemos resumirlas así:

Acceso directo a nodos

Sintaxis

Ejemplo

Elegido por su atributo id

document.getElementById('valorId');

document.getElementById (menu1);

Elegido por su atributo name

document.getElementsByName('valorName');

document.getElementsBy Name('peticionDatos');

Elegido por el tipo de etiqueta HTML (tag)

document.getElementsByTagName('valorTag');

document.getElementsByTag Name(span);

Elegido por class CSS

document.getElementsByClassName('valorClase');

document.getElementsByClassName('destacado');

Elegido por selector CSS

document.querySelectorAll('selectorCSS');

document.querySelectorAll ('#menu1 p');

Elegido por selector CSS

document.querySelector('selectorCSS');

document.querySelector ('#menu1 p');

 

 

Hace unos años se usaba document.all para realizar selección de nodos en un documento, por ejemplo document.all.tags(“div”) devolvía todos los elementos div en un documento, pero esta sintaxis se considera obsoleta por lo que no vamos a usarla.

Una vez que tenemos acceso directo a los nodos podemos empezar a hacer cosas interesantes como modificar dinámicamente los nodos, como veremos en el ejemplo de código que mostramos más abajo.

 

 

GET ELEMENT BY ID

Un atributo que pueden tener las etiquetas HTML es el valor de id, que permite entre otras cosas establecer estilos CSS para dicho elemento y sus descendientes. Por ejemplo <div id="contenedor"> establece que el id para este elemento div es “contenedor”.

El atributo id nos va a permitir acceder a un nodo del DOM con dicho valor de atributo. Recordar que en un documento HTML no debería existir más de un elemento con un mismo id. Es decir, los ids deben ser únicos (identificadores únicos de un elemento). En caso de tener dos elementos dentro de nuestro documento HTML que tengan el mismo id, pueden surgir errores (seguramente JavaScript devuelva el primer elemento con el id especificado que encuentre, pero no deberíamos trabajar teniendo ids repetidos porque esto es incorrecto).

El nombre de la función document.getElementById('valorId') nos informa sobre su cometido: nos devuelve un solo nodo de “tipo elemento” del DOM cuyo id coincide con el pasado como argumento.

Una vez tenemos el nodo con el id deseado, podemos modificar dinámicamente sus propiedades. En el siguiente código vemos un ejemplo donde el objetivo es mostrar una imagen con dos botones en su parte inferior: “<<<Atrás” para ir hacia atrás y mostrar una imagen anterior o “Adelante>>>” para ir hacia delante y mostrar una imagen posterior. Si ya estamos en la primera imagen o en la última, aparecerá un mensaje indicando que no es posible realizar ese movimiento. Escribe el código, ejecútalo y razona sobre él. Ten en cuenta que podría surgir algún problema de compatibilidad con tu navegador. Si es así, localiza dónde se encuentra ese problema y corrígelo (si tienes problemas para hacerlo escribe una consulta en los foros aprenderaprogramar.com).

ejemplo javascript getElementById

 

<html><head><title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">

<style type="text/css">

body {text-align: center; font-family: sans-serif;}

div {margin:20px;}

#contenedor {width:405px;margin:auto;}

#adelante, #atras {padding:15px; width: 130px; float: left;

color: white; border-radius: 40px; background: rgb(202, 60, 60);}

#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}

</style>

<script type="text/javascript">

var numeroImagenActual =9;

function moverImagen(movimiento) { 

if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante') {

alert ('No es posible hacer ese movimiento');

}

if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante') {

valorNuevoNumeroImagen = 9;

document.getElementById('imgCarrusel').src = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';

document.getElementById('imgCarrusel').alt = 'Camiseta 9 aprenderaprogramar.com';

document.getElementById('imgCarrusel').title = 'Diálogo entre informáticos';

}

if (numeroImagenActual == 9 && movimiento == 'atras') {

valorNuevoNumeroImagen = 6;

document.getElementById('imgCarrusel').src = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';

document.getElementById('imgCarrusel').alt = 'Camiseta 6 aprenderaprogramar.com';

document.getElementById('imgCarrusel').title = 'Desbordado por los números';

}

if (numeroImagenActual == 9 && movimiento == 'adelante') {

valorNuevoNumeroImagen = 11;

document.getElementById('imgCarrusel').src = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';

document.getElementById('imgCarrusel').alt = 'Camiseta 11 aprenderaprogramar.com';

document.getElementById('imgCarrusel').title = 'Estudiando programacion';

}

numeroImagenActual = valorNuevoNumeroImagen;

document.getElementById('numeracion').firstChild.nodeValue = 'Camiseta ' + numeroImagenActual;

}

</script>

</head>

<body>

<div >

<p>Pulsa adelante o atrás</p>

<h1 id="numeracion">Camiseta 9</h1>

<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">

<div id="contenedor">

<div id ="atras" onclick="moverImagen('atras')"> <<< Atrás </div>

<div id="adelante" onclick="moverImagen('adelante')" >Adelante >>></div>

</div>

</div></body></html>

 

 

EJERCICIO

1.Comprueba que el código anterior te permite cambiar la imagen que se muestra haciendo uso de los botones.

2. En el código anterior hay una declaración de variables (var numeroImagenActual =9;) que no está dentro de una función. ¿Por qué crees que se ha hecho esto así? Prueba a colocarla dentro de la función, comprueba qué ocurre y razona el por qué.

3. Modifica el código anterior para que en lugar de definirse src, alt y title para cada imagen dentro de los if, se definan estos valores usando arrays declarados en cabecera de la función. Por ejemplo tendremos que:

 valorSrc[0] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/ camiseta_6_humor_informatico_foto.jpg';

Las asignaciones dentro de los if deberán hacer referencia a los elementos del array y el resultado de ejecución deberá ser el mismo que se obtenía con el código original.

4. Duplica todo el código HTML existente dentro de la etiqueta body, de modo que se muestren dos veces el texto, dos veces la imagen y dos veces los botones. Cuando pulsas el botón situado debajo de la imagen inferior, ¿qué ocurre? ¿Por qué ocurre esto?

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.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿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
 

SEPTIEMBRE - OCTUBRE 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