Prototype : Funciones DOM

p style=”text-align: center;”>

Prototype Capitulo 03 – Utilizando la funcion $$()

A veces las usuales herramientas del artesanal DOM

• document.getElementById()
• document.getElementsByTagName()
• document.getelementsByClassName()

no son suficientes para encontrar rapidamente nuestros elementos o colecciones de elementos. Si conoces la la estructura de arbol de DOM sencillamente puedes recurrir a las CSS selectores para realizar un determinado trabajo.

$$('div');
// retorna todos los divs en el documento
$$('#contents');
// es lo mismo que $('contents'),
// solo que devuelve siempre un array
$$('li.faux');
// retorna todos los elementos li
// que tengan clase faux

veamos algo mas complejo en un formulario de Login:

<div id='frmLogin'>
<div class='campo'>
<span class='NombreCampo'>
Nombre Usuario:
</span>
<input type='text' id='txtNombre' value='cesar' />
</div>
<div class='campo'>
<span class='NombreCampo'>
Password:
</span>
<input type='password' id='txtPassword' value='123' />
</div>
<input type='submit' value='Login' />
</div>
<input type='button' onClick='test()' value='Funcion $$()' />

function test()
{
  var s=$$('div#frmLogin .campo input');
  var inputs='';
  for(var i=0; i<s.length; i++)
  {
    inputs+= s[i].value+' // ';
  }
  alert(inputs); //muestra cesar // 123
}