Dirneet's Blog
Otra forma de entender las cosas

JavaScript » document.getElementById

Si hubiera que decir cual ha sido el método más importante del lenguaje JavaScript desde su creación, creo que muchos coincidiríamos en que es document.getElementById. Dicho método nos permite obtener la referencia a un elemento de la página mediante el id de dicho elemento.

Por ejemplo, si tenemos una imagen representada por el siguiente código HTML:

<IMG src="foto.jpg" id="mifoto"/>

Podríamos obtener una referencia a dicha imagen mediante el siguiente código JavaScript:

<script type="text/javascript">
  foto=document.getElementById("mifoto")
</script>

Una vez obtenida la referencia al elemento, podemos acceder a todas sus propiedades, ya sea para lectura o escritura. Por ejemplo, en este caso podríamos cambiar el origen (src) de la imagen, su alto/ancho,…

Una de las cosas que más puede sacar de quicio a las personas que lo utilizan es confundir mayúsculas con minúsculas. Si usamos getElementBYID o getElementByID o GETELEMENTBYID,… no nos funcionará.

En este caso vamos a utilizar esta función para obtener el contenido de un área de texto. A si que lo primero que haremos será crear un área de texto:

<form action="">
<textarea rows="20" cols="40" id="areadetexto">Texto del área de texto</textarea>
</form>

Ahora, para acceder al área de texto, utilizaremos su id “areadetexto” y la función document.getElementById. Con el fin de hacerlo más interactivo, vamos a utilizar el código JavaScript en el evento onClick de un botón.

Veamos el código:

<form action="">
<textarea rows="20" cols="40" id="areadetexto">Texto del área de texto</textarea>
<input type="button" value="Contenido del TextArea" onClick="javascript:alert(document.getElementById('areadetexto').value);">
</form>
Anuncios

Ninguna respuesta to “JavaScript » document.getElementById”

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: