Интерфейс DocumentFragment

Интерфейс DocumentFragment определяет фрагмент документа как единое целое. Фрагмент можно добавить в документ HTML, перенести или скопировать в другое место, а также удалить. При вставке в документ добавляется не узел типа DocumentFragment, а его дочерние узлы.

Интерфейс DocumentFragment не имеет собственных свойств и методов, а наследует все свойства и методы интерфейса Node.

Пример 4.5.7. Создание и добавление фрагмента в документ HTML:

В следующем фрагменте программы JavaScript к документу HTML в примере 4.5.1) добавляется фрагмент, содержащий абзац и таблицу (используется элемент bodyElement из примера 4.5.5(1) и учитываются изменения, произведенные в примере 4.5.5):

// Создание фрагмента документа, содержащего

// абзац и таблицу

var docFragment = document.createDocumentFragment();

// Создание абзаца

var newPar = document.createElement("p");

// Создание таблицы

var table = document.createElement("table");

// Создание заголовка таблицы

var caption = document.createElement("caption");

// Создание заголовочной части таблицы

var thead = document.createElement("thead");

// Создание тела таблицы

var tbody = document.createElement("tbody");

// Создание строки таблицы

var row=document.createElement("tr");

// Создание ячейки заголовочной части таблицы

var headerCell = document.createElement("th");

// Создание ячейки тела таблицы

var cell=document.createElement("td");

// Занесение текста в абзац

newPar.appendChild(document.createTextNode(

"Ниже приведена таблица основных блоковых элементов."));

// Добавление абзаца к фрагменту документа

docFragment.appendChild(newPar);

// Заголовки таблицы

var headers = new Array("Имя элемента", "Назначение");

// Данные таблицы

var data = new Array(

new Array("h1, h2, h3, h4, h5, h6", "Заголовки"),

new Array("p", "Абзац"),

new Array("div", "Группа абзацев"));

// Занесение текста в заголовок таблицы

caption.appendChild(document.createTextNode(

"Таблица основных блоковых элементов"));

// Добавление заголовка к таблице

table.appendChild(caption);

// Создание строки заголовочной части

var headerRow = row.cloneNode(false);

// Заполнение строки заголовочной части таблицы в цикле

for(i = 0; i < headers.length; i++)

{

// Создание текущей ячейки

headerCelli = headerCell.cloneNode(false);

// Занесение текста в текущую ячейку

headerCelli.appendChild(

document.createTextNode(headers[i]));

// Добавление ячейки в строку

// заголовочной части таблицы

headerRow.appendChild(headerCelli);

}

// Добавление строки заголовочной части

// к заголовочной части

thead.appendChild(headerRow);

// Добавление заголовочной части к таблице

table.appendChild(thead);

// Заполнение строк данных таблицы в цикле

for(i = 0; i < data.length; i++)

{

// Создание текущей строки

rowi = row.cloneNode(false);

// Заполнение текущей строки таблицы в цикле

for(j = 0; j < data[i].length; j++)

{

// Создание текущей ячейки

cellj = cell.cloneNode(false);

// Занесение текста в текущую ячейку

cellj.appendChild(

document.createTextNode(data[i][j]));

// Добавление ячейки в строку

rowi.appendChild(cellj);

}

// Добавление строки в тело таблицы

tbody.appendChild(rowi);

}

// Добавление тела к таблице

table.appendChild(tbody);

// Добавление таблицы к фрагменту документа

docFragment.appendChild(table);

// Добавление фрагмента документа к телу документа

bodyElement.appendChild(docFragment);

Вывод Web-страницы имеет следующий вид: