Размещение

Не удивительно, что в состав NodeList включено несколько методов управления размещением узлов на странице. Среди них имеется метод coords, который, как и одноименная функция dojo.coord, возвращает массив с координатами для каждого узла в списке. А метод place объекта NodeList напоминает функцию dojo.place тем, что позволяет вставить весь список NodeList в определенное место в дереве DOM.

При этом метод addContent не имеет аналога ни в одной из библиотек инструментального набора. Он обеспечивает возможность добавлять узлы или текстовые строки в относительное местоположение для каждого узла в списке NodeList.

Ниже приводится пример использования метода addContent для вставки текстовой строки (которая оформлена как элемент span) после каждого контейнера в странице. Этот пример может быть полезен, в частности когда на экране отображается стопка контейнеров с вкладками:
/* Добавить текст после каждого контейнера с классом pageContainer */
var nl = dojo.query("div.pageContainer").addContent("footer goes here!",
"after");

Помня, что метод place помещает в страницу все элементы из списка NodeList относительно другого узла, для вставки всего списка в контейнерный узел, идентифицируемый значением debugPane в атрибуте id, можно сделать следующее:
var nl = dojo.query("div.someDebugNodes").place("#debugPane", "last");

Метод coords, как и одноименная функция, возвращает объект, содержащий пары ключ/значение, представляющие координаты каждого элемента в NodeList.


Запомните, что объект, возвращаемый методом coords, включает значения смещений от левого и верхнего краев, ширину и высоту, а также абсолютные координаты x и y, которые могут быть преобразованы в относительные координаты в окне броузера.
dojo.forEach(
dojo.query("div").coords(),
function(x) { console.log(x); }
);

Объект NodeList обладает одним уникальным методом размещения, аналога которому нет ни в одной библиотеке Dojo, – это метод orphan, который применяет простой фильтр (единственный селектор CSS; использование оператора «запятая» не разрешено) к каждому элементу в списке и каждый дочерний элемент, соответствующий критерию, удаляется из дерева DOM. Эти удаленные, или «осиротевшие» (orphaned), дочерние элементы возвращаются в виде нового списка NodeList. Метод orphan часто используется для удаления узлов из дерева DOM; и этот способ более устойчив к ошибкам, чем использование функций доступа к DOM, когда типичное удаление узла foo выглядит примерно так:
foo.parentNode.removeChild(foo).

Например, чтобы в дереве DOM удалить из элементов span все дочерние гиперссылки и получить их в виде списка NodeList, достаточно произвести такой вызов метода:
var nl = dojo.query("span > a").orphan()

Метод adopt по существу представляет собой противоположность методу orphan, то есть он позволяет вставлять элементы в дерево DOM.


Функция настолько гибкая, что позволяет ей передавать определенный узел DOM, строку критерия или список NodeList. Вставляемые узлы размещаются относительно первого элемента, когда в качестве аргумента методу adopt передается список NodeList. Во втором аргументе передается обычная информация о позиционировании (first, last, after или before):
var n = document.createElement("div");
n.innerHTML="foo";
dojo.query("#bar").adopt(n, "last");

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

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

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