В то время, как работа над Каскадными Таблицами Трансформации (CTS) идёт полным ходом, в голову приходят самые разнообразные идеи, с помощью которых довольно просто облегчить жизнь программисту. Одна из таких идей умудрилась прийти в голову во время разработки механизма в CTS, который отвечает непосредственно за создание новых элементов.
Идея напрямую связана с CSS-селекторами. Все привыкли, что селекторы помогают нам выбирать объекты. Это логично, потому они так и называются. Селекторы — это один из способов упрощения навигации по дереву элементов в документе. Однако они могут быть полезны не только в качестве гидов, но и в качестве направляющих при создании новых элементов в документе.
Селекторы добавления элементов
Когда мы с помощью JavaScript создаём элементы в документе, мы используем функцию document.createElement. Данная функция в качестве аргумента принимает имя элемента, который следует создать. После этого мы можем вручную установить необходимые параметры элемента: CSS-класс, уникальный идентификатор и другие. Позже, если понадобится, мы создаём новые элементы и вкладываем в уже созданный, выстраивая себе таким образом локальное дерево элементов.
Такая процедура зачастую утомительна, отнимает множество времени и заставляет писать десяток однотипных строк кода. Сегодня мы постараемся автоматизировать процесс создания локального дерева элементов, а использовать для этого мы будем селекторы.
Конечно, все CSS-селекторы нам ни к чему, поэтому мы оставим только контрольные: по CSS-классу, по уникальному идентификатору элемента и по его имени, конечно. В итоге наш селектор будет иметь такой общий вид (части в квадратных скобках не являются обязательными):
К тому же, можно описывать несколько селекторов через пробел для создания вложенных друг в друга элементов с необходимыми именами классов и идентификаторами.
Как определять селекторы
Перед тем, как реализовывать нашу основную функцию, потренируемся на поиске селекторов в строке. Создадим простую функцию, с помощью которой строка в вышеприведённой нотации будет преобразована в массив селекторов.
Данная функция — это базис для того, чтобы работать с простыми селекторами. Разумеется, она поддаётся расширению (например, добавлению новых типов контрольных точек в селекторах или даже использованию псевдоселекторов), но мы на данный момент рассматриваем концептуальную, самую простейшую из всех возможных реализаций.
Попробуем теперь рассмотреть, как должна работать функция создания локального дерева элементов по селектору.
Функция локального дерева
Выше мы уже рассмотрели одно требование к созданию дерева по селектору: необходима поддержка вложенности элементов. Помимо этого, нужно позаботиться и о том, чтобы функция возвращала весь набор созданных элементов для обеспечения непосредственного доступа к каждому отдельному уровню вложенности созданной иерархии.
Рассмотрим на примере. Пусть нам дан следующий селектор:
В результате выполнения нашей функции, мы должны получить следующее локальное дерево:
В соответствии с выясненными нами требованиями, функция должна возвратить такой объект, который бы дал нам доступ к каждому из элементов. Как такое сделать? Довольно просто: функция будет возвращать ассоциативный массив, ключами в котором будут частичные селекторы от общего, переданного в функцию. Для нашего примера частичный селектор самого первого элемента div будет равен div#element, а вложенного в него — div#element div.inner. Таким образом можно обеспечить доступ ко всему построенному дереву.
Более того, мы создадим в возвращаемом функцией массиве ещё два ключа для быстрого доступа к корневому и наиболее вложенному созданным элементам — root и last.
Мы знаем всё что нужно для реализации функции.
Функция готова. Давайте попробуем её в действии на примере. Положим, имеем следующий элемент:
Используем нашу функцию и создадим в нём необходимую вложенность:
В итоге получим следующее локальное дерево:
Мы создали переменную local_tree, с помощью которой можем обращаться к элементам дерева. Установим вложенному элементу span какой-нибудь CSS-класс, а ссылке зададим направление и содержимое:
Заключение
Данное исследование являлось прикладным по отношению к разрабатываемому сейчас CTS. Автор считает, что подобные исследования, хоть порой и не являются новаторскими, однако позволяют по-новому взглянуть на привычные вещи и даже переосмыслить их. Даже если и существуют альтернативные способы решения проблемы, это не значит, что данный способ не имеет право на существование: любое исследование — это и есть основа существования многогранных решений повседневных проблем. Постарайтесь подойти к этому с философской точки зрения.
