JavaScript. Подробное руководство, 6-е издание

   set: outerHTMLSetter,
   enumerable: false,
   configurable: true
   }):
   }
   else {
   Element.prototype.__defineGetter__("outerHTML", outerHTMLGetter);
   Element.prototype.__defineSetter__("outerHTML", outerHTMLSetter);
   }
  });

15.6.4. Использование объектов DocumentFragment

Объекты DocumentFragment– это особая разновидность объектов Node; они служат временным контейнером для других узлов. Создаются объекты DocumentFragment следующим образом:

  var frag = document.createDocumentFragment;

Как и узел Document, объекты DocumentFragment являются самостоятельными и не входят в состав какого-либо другого документа. Его свойство parentNode всегда возвращает значение null. Однако, как и узлы Element, объекты DocumentFragment могут иметь любое количество дочерних элементов, которыми можно управлять с помощью методов appendChild, insertBefore и т. д.

Одна из особенностей объекта 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,