В этой статье мы рассмотрим способы выборки элементов страницы. Это важная часть, поскольку Вам постоянно придется их использовать.

Основные функции

Функция $();

Основной селектор в фреймворке. С помощью него Вы можете найти элемент DOM по ID:

$('body_wrap');

<div id="body_wrap"></div>

.getElement();

Расширяет функцию $(). К примеру, Вы получили элемент body_wrap по ID и Вам нужно среди дочерних найти другой по тегу, классу или ID. Если условию выборки удовлетворяет несколько элементов, функция возвращает первый.

//первый дочерний элемент ссылка внутри 'body_wrap'
$('body_wrap').getElement('a');

//первый дочерний элемент с ID 'special_anchor' внутри 'body_wrap'
$('body_wrap').getElement('#special_anchor');

//первый дочерний элемент с классом 'special_anchor_class' внутри 'body_wrap'
$('body_wrap').getElement('.special_anchor_class');

<div id="body_wrap">
	<a href="#">anchor</a>
	<a href="#">another anchor</a>
	<a id="special_anchor" href="#">special anchor</a>
	<a class="special_anchor_class" href="#">special anchor</a>
	<a class="special_anchor_class" href="#">another special anchor</a>
</div>

$$();

В отличие от $() функция возвращает массив элементов.

//все div на странице
$$('div'); 

//элемент с ID 'id_name' и все div
$$('#id_name', 'div');

<div>
	<div>a div</div>
	<span id="id_name">a span</span>
</div>

.getElements()

Идентична .getElement(), возвращает массив элементов.

//все дочерние элементы ссылки внутри 'body_wrap'
$('body_wrap').getElements('a'); 

//все дочерние элементы с классом 'special_anchor_class' внутри 'body_wrap'
$('body_wrap').getElements('.special_anchor_class');

<div id="body_wrap">
	<a href="#">anchor</a>
	<a href="#">another anchor</a>
	<a class="special_anchor_class" href="#">special anchor</a>
	<a class="special_anchor_class" href="#">another special anchor</a>
</div>

.getParent();

Возвращает элемент родитель.

// родитель элемента с ID 'child_id'
$('child_id').getParent();

<div id="parent_id"> <!— код выше возвращает этот элемент —>
	<div id="child_id">Even</div>
</div>

Операторы

MooTools поддерживает специальные операторы, позволяющие уточнить выборку:

= : равно

//элементы input с именем 'phone_number'
$('body_wrap').getElements('input[name=phone_number]');

^= : начинается с

//элементы input с именем, начинающимся на phone
$('body_wrap').getElements('input[name^=phone]');

$= : заканчивается на

//элементы input с именем, заканчивающимся на number
$('body_wrap').getElements('input[name$=number]');

!= : не равно

//элементы input с именем, не совпадающим с address
$('body_wrap').getElements('input[name!=address]');

Псевдоселекторы

enabled

Используется для выборки активных элементов.

$$('div:enabled');

empty

Используется для выборки пустых элементов.

$$('div:empty');

contains

Используется для элементов с текстом text.

$$('div:contains("find me")');

nth.child, even, odd, first.child, last.child, only.child

Используется для выборки элементов с определенным номером.

$$('div:contains("find me")');$$('div:nth-child(2n)'); //все четные элементы
$$('div:nth-child(even)');
$$('div:even');

$$('div:nth-child(n)'); //все элементы

$$('div:nth-child(2n+1)') //все нечетные элементы
$$('div:nth-child(odd)');
$$('div:odd');

$$('div:nth-child(4n+3)') //все элементы с номерами 3, 7, 11, 15, ...

$$('div:nth-child(first)'); //первый элемент
$$('div:first-child');

$$('div:nth-child(last)'); //последний элемент
$$('div:last-child');

$$('div:nth-child(only)'); //единственный элемент
$$('div:only-child');

Заключение

Интересный эксперимент, показывающий разницу скорости выборки в популярных фреймворках.

Подробное описание функций:
http://mootools.net/docs/Utilities/Selectors

Имя

Электронная почта

Сайт