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

Флэнаган Дэвид

function outerHTMLSetter(value) {

// Создать фиктивный элемент и сохранить в нем указанное значение

var container = document.createElement("div");

container.innerHTML = value;

// Переместить все узлы из фиктивного элемента в документ

while(container.firstChild) // Продолжать, пока в контейнере

//

не останется дочерних элементов

this.parentNode.insertBefore(container.firstChild, this);

// И удалить замещаемый узел

this.parentNode.removeChild(this);

}

// Использовать эти две функции в качестве методов чтения и записи свойства outerHTML

// всех объектов Element. Использовать метод Object.defineProperty, если имеется,

// в противном случае использовать __defineGetter__ и __defineSetter__.

if (Object.defineProperty) {

Object.defineProperty(Element.prototype,

"outerHTML",

{ get: outerHTMLGetter,

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.