Используем Sizzle отдельно от jQuery

Опубликовано:

Sizzle — кроссбраузерный движок селекторов, реализованный на JavaScript и используемый в популярной библиотеке jQuery.

В современных браузерах Sizzle использует стандартные DOM-методы querySelectorAll() и matchesSelector(), обеспечивая высокое быстродействие. В старых же браузерах, а также для реализации нестандартных селекторов, применяется чисто скриптовая реализация — более медленная, но обеспечивающая совместимость даже с IE6/7.

Приятная особенность Sizzle — его автономность: если широкие возможности jQuery для конкретной задачи или проекта не нужны, можно использовать Sizzle как самостоятельную библиотеку, заметно выиграв тем самым в скорости загрузки: в минимизированном виде и с Gzip-сжатием Sizzle имеет объём всего 6 КБ (!) — это более чем в 5 раз меньше размера jQuery в аналогичных условиях.

Использовать Sizzle — не сложнее, чем jQuery:

var elements = Sizzle('.example > LI');

Результатом будет стандартный JavaScript-список (объект Array) элементов, соответствующих заданному селектору.

Как и в jQuery, в качестве второго аргумента Sizzle можно передать контекст поиска элементов — элемент, потомками которого требуется ограничить выборку (контекстом по умолчанию является весь HTML-документ — объект document):

var context  = document.getElementById('some-container');
var elements = Sizzle('.example > LI', context);

В качестве третьего аргумента можно передать существующий Array-список элементов, куда будут автоматически добавлены найденные элементы:

var spans = Sizzle('SPAN');
var elems = Sizzle('DIV', document, spans);
// Теперь переменные spans и elems содержат один и тот же
// список (объект Array) одних и тех же элементов SPAN и DIV.

Кроме того, в Sizzle доступны ещё две полезные функции, по функциональности родственные методу jQuery.filter():

Sizzle.matchesSelector(element, selector)
Определяет, соответствует ли HTML-элемент селектору. Возвращает булево значение (true или false).
Sizzle.matches(selector, elements)
Возвращает JavaScript-список (Array) элементов из списка, соответствующих селектору.