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,

  // содержащий разобранное представление этой разметки

  function fragment(html) {

    var elt = document.createElement("div"); // Пустой элемент

    var frag = document.createDocumentFragment(); // Пустой фрагмент

    elt.innerHTML = html; // Содержимое элемента

    while(elt.firstChild) // Переместить все узлы

      frag.appendChild(elt.firstChild); // из elt в frag

    return frag; // И вернуть frag

  }

  var Insert = {

    before: function(elt, html) {

      elt.parentNode.insertBefore(fragment(html), elt):

    },

    after: function(elt, html) {

      elt.parentNode.insertBefore(fragment(html),elt.nextSibling);

    },

    atStart: function(elt, html) {

      elt.insertBefore(fragment(html), elt.firstChild);

    },

    atEnd: function(elt, html) { elt.appendChild(fragment(html)); }

  };

  // Реализация метода insertAdjacentHTML на основе функций выше

  Element.prototype.insertAdjacentHTML = function(pos, html) {

    switch(pos.toLowerCase()) {

    case "beforebegin": return Insert.before(this, html);

    case "afterend": return Insert.after(this, html);

    case "afterbegin": return Insert.atStart(this, html);

    case "beforeend": return Insert.atEnd(this, html);

    }

  };

  return Insert; // Вернуть четыре функции вставки

}());