Si hubiera que decir cuál 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 id="mifoto" src="foto.jpg">

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

foto=document.getElementById("mifoto")

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. Así que lo primero que haremos será crear un área de texto:

<form action="">
  <textarea id="areadetexto" cols="40" rows="20">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>