Работа с селекторами

Базовое объяснение работы с селекторами через функцию Brahma(selector)

Brahma("#foo"); // Gets element with id "foo"
Brahma(".foo"); // Gets element with className "foo"
Brahma("[foo]"); // Gets element with attribute name "foo"

Функция Brahma() принимает строку-селектор, возвращая объект с псевдо-массивом полученных через селектор элементов

var body = Brahma("body");

Обработчик селекторов Brahma поддерживает все современные браузеры, IE9+ включительно. Поддержка IE8- была исключена в пользу размеров самого файла (был исключен Sizzle). Селекторы обрабатываются нативно через функцию jquerySelector объекта document и соответственно поддерживает тот же синтаксис.

Набор элементов

Функция Brahma(selector) всегда возвращает набор элементов, даже если в результате поиска был найден всего один элемент или не найдено вовсе. Этот набор представляет из себя объект, содержащий свойство length со значением количества найденных элементов, перечень самих элементов, доступ к которым можно получить на индексу, и API в прототипе.

Brahma('body') = {0: htmlElement, length: 1, _proto_: {...}}

Повторная инициализация набора

Можно передать в функцию Brahma не селектор, а уже созданный ранее набор, это не станет ошибкой.

var body = Brahma('body');
Brahma(body); // OK

Более того в функцию можно передавать набор jQuery или просто массив с нативными элементами.

var jbody = jQuery('body');
Brahma(jbody); // OK

var kit = [
document.getElementById('foo')
];
Brahma(kit); // OK

API набора элементов

Каждый набор элементов содержит прототип с функциями для работы с ним. Здесь я перечислю лишь те, что относятся к поиску элементов и работе с селекторами.

Поиск дочерних элементов в контексте другого набора-элементов

Brahma(...).find()

Объект, получаемый через селектор обладают рядом API, в т.ч. включающий инструментарий для поиска элементов. Основной функцией для поиска элементов служит функция find. Она идентичная работе функции Brahma(selector) только в контексте уже найденного.

Brahma("content").find("h1"); // Найдет тэг h1 внутри тэга content

Получение родительского элемента

Brahma(...).parent()

Brahma("h1").parent(); // Вернет массив с родительским элементом

Количество найденных элементов

Количество найденных элементов хранится в свойстве полученного объекта length.

Brahma('div').length; // Поиск всех элементов DIV на странице

Каждый из элементов может быть получен по его индексу.

Доступ к нативному элементу через его индекс

Brahma("h1")[0] // Вернет нативный HTMLElement, аналогично вызову document.querySelector("h1")

Перебор элементов

Brahma(...).each(callback)

Метод each производит перебор всех найденных элементов с вызовом callback-функции и передачей в неё каждого элемента в качестве первого аргумента.

Brahma('div').each(function(element) {
// Do something
});

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

Расширенный синтаксис селекторов

scope:

IE не поддерживает scope: в querySelector, поэтому поддержку поиска элемента через селектор в контексте другого элемента, пришлось обеспечивать программно. Я использовал полифил от автора Larry Davis https://github.com/lazd/scopedQuerySelectorShim, что бы исправить эту проблему.

document.querySelector('h1', document.querySelector('content'));

Поиск непосредственного дочернего элемента

document.querySelector не поддерживает такой синтаксис как маркер непосредственного дочернего элемента >, который указывается вначале селектора. Это очень привычный трюк, который используется в Sizzle, но отсутствует нативно, поэтому пришлось обернуть querySelector в предобработчик для символа >.

document.querySelector('h1', document.querySelector('content')); // +
document.querySelector('>h1', document.querySelector('content')); // Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '>h1' is not a valid selector.
Brahma('content').find('>h1'); // +