Строим DOM.

Интерфейс программы состоит из более чем 30 элементов DOM. Нужно их как-то собрать вместе.

Очевидным форматом для сложных структур DOM является HTML. Но разделять программу на HTML и скрипт неудобно – для элементов DOM понадобится множество обработчиков событий или других необходимых вещей, которые надо будет как-то обрабатывать из скрипта. Для этого придётся делать много вызовов querySelector и им подобных, чтобы найти нужный элемент DOM для работы.

Было бы удобно определять части DOM рядом с теми частями кода JavaScript, которые ими управляют. Поэтому я решил создавать всю конструкцию DOM прямо в JavaScript. Как мы видели в главе 13, встроенный интерфейс для создания структур DOM ужасно многословен. Поскольку нам придётся создать много конструкций, нам понадобится вспомогательная функция.

Эта функция – расширенная версия функции elt из главы 13. Она создаёт элемент с заданным именем и атрибутами, и добавляет все остальные аргументы, которые получает, в качестве дочерних узлов, автоматически преобразовывая строки в текстовые узлы.

Function elt(name, attributes) {

Var node = document.createElement(name);

If (attributes) {

For (var attr in attributes).

If (attributes.hasOwnProperty(attr)).

Node.setAttribute(attr, attributes[attr]);

}

For (var i = 2; i < arguments.length; i++) {

Var child = arguments[i];

If (typeof child == "string").

Child = document.createTextNode(child);

Node.appendChild(child);

}

Return node;

}

Так мы легко и просто создаём элементы, не раздувая код до размеров лицензионного соглашения.