Webizzima - Le ofrecemos al mundo contenido profesional y de avanzada visión para usuarios que buscan grandes horizontes. Todo a la distancia de un clic y en español.

Mootools 1.2 – Selectores

---

Si no lo has hecho todavía, asegúrate de chequear primero el tutorial Día 1 – Introducción a la librería. Allí hablamos de cómo instalar Mootools 1.2 y cómo llamar tus scripts dentro del evento domready.

Bienvenido al día 2 de la compilación 30 Días de Mootools 1.2. En este tutorial, vamos a aprender varios métodos para seleccionar elementos HTML. En muchas formas, esto es lo básico para lo que comunmente Mootools es más usado. Después de todo, para crear una experiencia de usuario interactiva con elementos HTML, primero tienes que ponerle las manos encima.

Lo básico

---

$();

La función $ es el selector básico dentro de Mootools. Con él, puedes seleccionar un elemento DOM por ID.

//selecciona el elemento con el ID 'body_wrap'
$('body_wrap');

.getElement();

.getElement(); extiende $, permitiéndote refinar tu selección. Por ejemplo, tú podrías seleccionar el ID body wrap con $, entonces seleciona el first child anchor. .getElement(); solo selecciona un elemento sencillo y retornará el primero si es el caso de varias opciones. Si agregas el nombre de una clase dentro de .getElement(); obtendrás la primera ocurrencia de un elemento con ese nombre de clase antes dado y no un array de todos los elementos. Para seleccionar múltiples elementos, mira getElements(); debajo:

//selecciona el first child anchor dentro del elementocon el ID 'body_wrap'
$('body_wrap').getElement('a');

//selecciona el elemento con el ID 'special_anchor' dentro del elemento 'body_wrap'
$('body_wrap').getElement('#special_anchor');

//selecciona el first child con la clase 'special_anchor_class' dentro del elemento 'body_wrap'
$('body_wrap').getElement('.special_anchor_class');

        anchor
        another anchor
        special anchor
        special anchor
        another special anchor

$$();

$$ te permite seleccionar rápidamente múltiples elementos y los sitúa dentro de un array (un tipo de listado que te permite manipular, recuperar, y reordenar el mismo en todo tipo de formas). Puedes seleccionar elementos por nombres (así como div, a, img) o un ID, e incluso puedes mezclar y coincidir.

//todos los divs en la página
$$('div');

//selecciona el elemento con el ID 'id_name' y todos los divs
$$('#id_name', 'div');

a div

a span

.getElements();

.getElements(); es similar a .getElement();, excepto que devuelve todos los elementos que se ajustan a los criterios, situándolos dentro de un array. Puedes hacer uso de .getElements(); como usarías .getElement();.

//selecciona todos los child anchors dentro del elemento con el ID 'body_wrap'
$('body_wrap').getElements('a');

//selecciona todos los children con la clase 'special_anchor_class' dentro del elemento 'body_wrap'
$('body_wrap').getElements('.special_anchor_class');

        anchor
        another anchor
        special anchor
        another special anchor

Incluyendo y excluyendo resultados con operadores

---

Operadores

Mootools 1.2 soporta muchos operadores que te permiten refinar tus selecciones. Puedes usar operadores dentro de .getElements(); e incluir o excluir ciertos resultados. Mootools soporta 4 operadores, cada cual puede ser usado para seleccionar una entrada de elemento por nombre:

• =: es igual a

  //selecciona la entrada con el nombre 'phone_number'
  $('body_wrap').getElements('input[name=phone_number]');
  

• ^=: comienza-con

  //selecciona la entrada con un nombre comenzando con phone
  $('body_wrap').getElements('input[name^=phone]');
  

• $=: finaliza-con

  //selecciona la entrada con un nombre terminado en número
  $('body_wrap').getElements('input[name$=number]');
  

• !=: no es igual a

  //selecciona la entrada la cual no es llamada address
  $('body_wrap').getElements('input[name!=address]');
  

Para usar los operadores, primero defines el elemento (input), entonces define el atributo que te gustaría filtrar (name), pones el operador y entonces, escoje tu filtro de cadena.

Selectores basados en orden de elemento

---

even

Usa este simple selector para escojer uniformemente elementos ordenados. Nota: este selector comienza en 0, así que el primer elemento es even.

// selecciona todos los divs even
$$('div:even');

Even
Odd
Even
Odd

odd

Tal como even, excepto que este selecciona todos los elementos odd.

// selecciona todos los divs odd
$$('div:odd');

Even
Odd
Even
Odd

.getParent();

Con .getParent(); puedes obtener el padre de un elemento.

// selecciona la raíz del elemento con el ID 'child_id'
$('child_id').getParent();

Even

Ejemplos

---

Cualquier UI de desarrollo comenzará con selectores. A continuación te muestro algunos ejemplos sobre cómo usar selectores para manipular elementos DOM:

//cambia el color de fondo de todos los spans en #eee
$$('span').setStyle('background-color', '#eee');

//cambia el color de fondo de todos los odd children de #body_wrap a #eee
$$('span:odd').setStyle('background-color', '#eee');

//cambia el color de fondo de todos los elementos con la clase .middle_spans a #eee
$('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');

    Even
    Odd
    Even
    Odd

Descarga el zip de la clase de hoy

Para aprender más…

---

Esta es una exhaustiva lista de selectores de Mootools 1.2, el objetivo es darte una idea de lo que Mootools tiene para brindarte. Para aprender más sobre selectores, chequea los siguientes documentos:

• Existen toneladas de slectores dentro de Element
• También lee sobre Selectores

Lee sobre Selectores $$ en el blog oficial de Mootools

Aquí tienes una gran entrada en mootools.net sobre el selector selector $$ y cuán diverso es. Puedes hacer una cantidad de cosas increíbles con este selector, créeme, vale la pena hecharle una mirada.

Más sobre selectores

Aquí tienes un experimento de los amigos de Mootools que mide cuán rápido las diferentes librerías son capaces de recuperar elementos. Esto es asombroso, pero mucho más valiosos son te serán los ejemplos de selectores que ellos tienen allí. Todos los selectores mostrados allá deben funcionar con $$.

Selectores W3C

Mootools también te deja chequear el poder de los pseudo selectores. Aquí tienes una entrada de la W3C sobre selectores, definitivamente vale la pena leérlo. No estoy seguro si todos los selectores mencionados en esa página sean compatibles con el selector $$, la mayoría si.

Vía | ConsiderOpen