Podríamos decir que la característica principal del framework Prototype es la facilidad de acceder a un elemento de la página web. Prototype nos proporciona una forma unificada de acceso a los elementos de forma independiente al navegador que estemos utilizando.
Para ello Prototype utiliza la función $. El manejo de dicha función es muy sencillo, ya que esta recibirá el ID del elemento al que queramos acceder.
$("idElemento")
Para mostrar el funcionamiento de esta función vamos a acceder al contenido de una imagen que haya dentro de la página HTML.
Lo primero, crear la página con una imagen. Y, claro, dar un ID a dicha imagen. Veamos como sería este primer código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Obtener referencia a un elemento con Prototype</title> </head> <body> <img src="img/prototype.png" id="imagen"/> </body> </html>
Muy sencillo de hacer con el elemento <IMG>
El siguiente paso será el cargar el framework Prototype. Para ello simplemente hay que cargar la librería prototype.js en la cabecera de la página.
<head> <script type="text/JavaScript" src="prototype/prototype.js"></script> </head>
Y ahora solo nos quedará el utilizar al función $. El parámetro será el ID de la imagen. En este caso el ID que le hemos dado a la imagen es «imagen».
Veamos como sería la línea de código para utilizarlo.
<script>document.write($("imagen").src);</script>
