Capturar o aplicar atributos a etiquetas con Prototype

(Utilizando el framework Prototype)

Este código es muy útil, cuando se necesita obtener todos los elementos de un tipo, ya sea dentro de toda la pagina o dentro de un área especifica.

Por ejemplo, podríamos capturar como abjetos, todos los enlaces que se encuentren en un div y cambiar o utilizar sus atributos (href, class, id, name…).

Supongamos que tenemos…

<div id="container">
   <a href="#pagina1" class="enlace1" id="link">pagina1</a>
   <a href="#pagina2" class="enlace1" id="link">pagina2</a>
   <a href="#pagina3" class="enlace2" id="link">pagina3</a>
   <a href="#pagina4" class="enlace2" id="link">pagina4</a>
   <a href="#pagina5" class="enlace2" id="link">pagina5</a>
</div>

Ejemplo 1: Capturar todos los enlaces que se encuentran en el div #container

<script type="text/javascript">
   function capturar(){
      $$('#container a').each(function(objeto) {
          alert('href: ' + objeto.href);
      });
   }
</script>

<button onclick="capturar1();">Test</button>

Ejemplo 2: Capturar todos los enlaces en la pagina

<script type="text/javascript">
   function capturar2(){
      $$('#link').each(function(objeto) {
         alert('href: ' + objeto.href);
      });
   }
</script>

<button onclick="capturar2();">Test</button>

Ejemplo 3: Capturar todos los enlaces que se encuentran en el div #container que tienen una clase en especifico

<script type="text/javascript">
   function capturar3(){
      $$('#container a.enlace1').each(function(objeto) {
         alert('href: ' + objeto.href);
      });
   }
</script>

<button onclick="capturar3();">Test</button>

Ver Demo

Aqui pueden ver mas utilidadesde la funcion $$

http://www.prototypejs.org/api/utility/dollar-dollar