Шрифт:
Одна из особенностей объекта
DocumentFragment
состоит в том, что он позволяет манипулировать множеством узлов как единственным узлом: если объект DocumentFragment
передать методу appendChild, insertBefore
или replaceChild,
в документ будут вставлены дочерние элементы фрагмента, а не сам фрагмент. (Дочерние элементы будут перемещены из фрагмента в документ, а сам фрагмент опустеет и будет готов для повторного использования.) Следующая функция использует объект DocumentFragment
для перестановки в обратном порядке дочерних элементов узла:
// Выполняет перестановку дочерних элементов узла n в обратном порядке
function reverse(n) {
// Создать пустой объект DocumentFragment, который будет играть роль
// временного контейнера
var f = document.сreateDocumentFragment;
// Выполнить обход дочерних элементов в обратном порядке и переместить каждый
// из них в объект фрагмента. Последний дочерний элемент узла n станет первым
// дочерним элементом фрагмента f, и наоборот. Обратите внимание, что при добавлении
// дочернего элемента в фрагмент f он автоматически удаляется из узла n.
while(n.lastChild) f.appendChild(n.lastChild);
// В заключение переместить сразу все дочерние элементы
// из фрагмента f обратно в узел n.
n.appendChild(f);
}
В примере 15.6 представлена реализация метода
insertAdjacentHTML
(раздел 15.5.1) с применением свойства innerHTML
и объекта DocumentFragment
. В нем также определяются функции вставки разметки HTML с более логичными именами, чем неочевидное insertAdjacentHTML
. Вложенная вспомогательная функция fragment
является, пожалуй, наиболее интересной частью этого примера: она возвращает объект DocumentFragment
, содержащий разобранное представление указанной ей строки с разметкой HTML. Пример 15.6. Реализация метода insertAdjacentHTML с использованием свойства innerHTML
// Этот модуль определяет метод Element.insertAdjacentHTML для броузеров,
// не поддерживающих его, а также определяет переносимые функции вставки HTML,
// имеющие более логичные имена, чем имя insertAdjacentHTML:
// Insert.before, Insert.after, Insert.atStart, Insert.atEnd
var Insert = (function {
// Если элементы имеют собственный метод insertAdjacentHTML, использовать
// его в четырех функциях вставки HTML, имеющих более понятные имена,
if (document.createElement("div").insertAdjacentHTML) {
return {
before: function(e,h) {e.insertAdjacentHTML("beforebegin",h);},
after: function(e,h) {e.insertAdjacentHTML("afterend",h);},
atStart: function(e,h) {e.insertAdjacentHTML("afterbegin",h);},
atEnd: function(e,h) {e.insertAdjacentHTMLC'beforeend",h);}
};
}
// Иначе, в случае отсутствия стандартного метода insertAdjacentHTML,
// реализовать те же самые четыре функции вставки и затем использовать их
// в определении метода insertAdjacentHTML.
// Сначала необходимо определить вспомогательный метод, который принимает
// строку с разметкой HTML и возвращает объект DocumentFragment,