Obtener el contenido de una capa con Prototype

Como ya sabemos, el framework Prototype nos permite manejar las páginas HTML dinámicamente de una forma muy sencilla. Para ello evita que tengamos que conocer todos los detalles del lenguaje JavaScript y las complejidades de los modelos DOM de las páginas.

Uno de sus ejemplos será el obtener el contenido de una capa de la página.

Definir una capa en HTML

Las capas en HTML se pueden definir mediante el elemento div. De esta forma podríamos definir una capa en HTML de la siguiente forma:

<div id="micapa">
  Contenido de mi capa<br />
  para lineadecodigo.com
</div>

Es muy importante el identificador que le demos a la capa. Es decir, el valor de su atributo id. Ya que dicho valor será el que utilicemos para acceder a la capa desde Prototype.

Acceder a la capa con $()

En Prototype nos apoyaremos en el método de utilidad $(). Este método recibe como parámetro el identificador del elemento de la página a acceder. En nuestro ejemplo sería ‘micapa’.

$("micapa");

Este código solo nos devolverá el elemento tal cual, es decir, la capa.

Obtener el contenido de la capa

Si lo que queremos es acceder a su contenido deberemos de acceder al atributo innerHTML de la capa. El cual nos dará el contenido de dicha capa. Veamos como sería dicho código:

alert($("micapa").innerHTML);

Nos hemos apoyado en el método alert de JavaScript para mostrarlo en una ventana emergente.

Cargar el framework Prototype

Acuérdate que para cargar el framework Prototype simplemente nos apoyamos en el elemento <script> mediante la cual indicaremos la librería prototype.js.

<script src="prototype.js"></script>