Acceder a elementos con Prototype

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:

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

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Acceder a elementos con Prototype

El framework Prototype facilita acceder a elementos de la página web mediante la función con el ID del elemento.

Descargar código