Шрифт:
// содержащий разобранное представление этой разметки
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; // Вернуть четыре функции вставки
});
15.7. Пример: создание оглавления
Пример 15.7 показывает, как динамически создавать оглавление документа. Он демонстрирует многие концепции работы с документом, описанные в разделах выше: выбор элементов, навигация по документу, установка атрибутов элементов, установка свойства
innerHTML
и создание новых узлов и вставку их в документ. Пример снабжен большим количеством комментариев, которые призваны облегчить понимание программного кода. Пример 15.7. Автоматическое создание оглавления документа
/**
* TOC.js: создает оглавление документа.
*
* Этот модуль регистрирует анонимную функцию, которая вызывается
* автоматически по окончании загрузки документа. Эта функция сначала
* отыскивает элемент документа с атрибутом id="TOC". Если такой элемент
* отсутствует, функция создает его, помещая в начало документа.
*
* Затем функция отыскивает все элементы с <h1> по <h6>, интерпретируя их как
* заголовки разделов и создает оглавление внутри элемента ТОС. Функция добавляет
* номера разделов в каждый заголовок и обертывает заголовки именованными