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 }