Поиск: универсальная реализация

Если вы имеете богатый опыт программирования на JavaScript, у вас не будет сомнений в необходимости средств, выполняющих поиск узлов в дереве DOM на основе некоторого множества критериев. Если все, что вам требуется, – это отыскать узлы с определенным именем тега, то вполне достаточно воспользоваться функцией document.getElementsBy-TagName. Однако когда необходимо отыскать множество узлов по имени класса, определенному значению атрибута или некоторой их комбинации, вам придется крепко задуматься над тем, почему в JavaScript отсутствует встроенная функция getElementsByClass. Очевидно, что любой, кто задавался этим вопросом, пытался написать собственную версию функции – одни более успешно, другие – менее.

Ранние версии Dojo включали в себя специализированные версии функции getElementsByClass, но теперь инструментальный набор содержит более универсальную функцию, позволяющую выполнять поиск в дереве DOM, используя синтаксис селекторов CSS. Чтобы продемонстрировать, как этот «швейцарский нож» применяется для поиска в дереве DOM, рассмотрим героическую попытку реализовать собственную версию функцию getElementsByClass (для очень общего случая):
// Отыскивает элементы с заданным именем класса,
// При желании поиск может начинаться с определенного родительского узла
function getElementsByClassName(/*String*/className, /*DOMNode?*/node) {
var regex = new RegExp('(^| )' + className + '( |$)');
var node = node||document.body;
var elements = node.getElementsByTagName("*");
var results = [];
for (var i=0; i < elements.length; i++) {
if (regex.test(elements[i].className)) {
results.push(elements[i]);
}
}
return results;

Хотя эта функция занимает всего 13 строк программного кода, тем не менее эти 13 строк все равно придется писать, отлаживать и сопровождать.


Если вам потребуется выполнить поиск по комбинации имени класса и имени тега, то придется добавить еще один параметр для имени тега и передавать его функции getElementsByTagName. Если потребуется чтото еще, вам точно так же придется написать и отладить и эту логику. Теперь к этому всему добавьте тот факт, что наверняка встретится пара крайних случаев, когда функция, представленная выше, будет работать не всегда или не во всех броузерах, а также то обстоятельство, что обычно регулярные выражения не являются интуитивно очевидными.

К счастью, dojo.query избавляет от необходимости иметь свои функции поиска. Ниже приводится сигнатура функции, обеспечивающей универсальные возможности поиска:
dojo.query(/*String*/ query, /*String?|DOMNode?*/ root) //Возвращает NodeList

Чтобы с помощью query имитировать поведение представленной выше функции getElementsByClassName, достаточно просто передать ей селектор CSS, как показано ниже:
dojo.query(".someClassName")

Поиск по имени тега, например DIV, и по имени класса выполняется ничуть не сложнее – достаточно просто воспользоваться синтаксисом селекторов CSS:
dojo.query("div.someClass")

Начали понимать всю прелесть использования простого и однострочного способа поиска в дереве DOM с применением единообразного синтаксиса? Эта функция понравится вам тем больше, чем дальше прочитаете..



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
NodeList
Анимация
Аргументы в стиле «функции в виде строк»
Длинный и нестабильный способ
Методы, напоминающие методы массивов

Вернуться в раздел: Dojo / Манипулирование узлами