feed twitter facebook LinkedIn facebook

Prototype » Acceder a elementos con Prototype

Febrero 10, 2007 por Víctor Cuervo . 7666 visitas 1 Comentario Imprimir Imprimir

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>

Visualizar el ejemplo | Descargar el código

tags:

Artículos relacionados:

1 comentario »

Redifusión RSS de los comentarios de la entrada. TrackBack URI

  1. softcarlos
    Enero 21, 2010 #

    buen aoirte
    estaba buscando esto

Deje un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*