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

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

/**

* TOC.js: создает оглавление документа.

*

* Этот модуль регистрирует анонимную функцию, которая вызывается

* автоматически по окончании загрузки документа. Эта функция сначала

* отыскивает элемент документа с атрибутом id="TOC".

Если такой элемент

* отсутствует, функция создает его, помещая в начало документа.

*

* Затем функция отыскивает все элементы с <h1> по <h6>, интерпретируя их как

* заголовки разделов и создает оглавление внутри элемента ТОС. Функция добавляет

* номера разделов в каждый заголовок и обертывает заголовки именованными

* якорными элементами, благодаря чему оглавление может ссылаться на них.

* Якорным элементам даются имена, начинающиеся с приставки "ТОС", поэтому вам следует

* избегать использовать эту приставку в своей разметке HTML.

*

* Оформление элементов оглавления можно реализовать с помощью CSS. Все элементы имеют

* класс "TOCEntry". Кроме того, каждый элемент оглавления имеет класс, соответствующий

* уровню заголовка раздела. Для заголовков, оформленных тегом <h1>, создаются элементы

* оглавления с классом "TOCLevell",для заголовков <h2> - с классом "T0CLevel2" и т. д.

* Номера разделов, вставляемые в заголовки, получают класс "TOCSectNum".

*

* Этот модуль можно использовать с каскадными таблицами стилей, такими как:

*

* #Т0С { border: solid black 1рх; margin: Юрх; padding: Юрх; }

* .TOCEntry { font-family: sans-serif; }

* .TOCEntry a { text-decoration: none; }

* .TOCLevell { font-size: 16pt; font-weight: bold; }

* .T0CLevel2 { font-size: 12pt; margin-left: .5in; }

* .TOCSectNum:after { content: "; }

*

*

Последнее определение генерирует двоеточие и пробел после номера раздела.

* Чтобы скрыть номера разделов, можно использовать следующий стиль:

*

* .TOCSectNum { display: none }

*

* Этот модуль использует вспомогательную функцию onLoad.

**/

onLoad(function { // Анонимная функция, определяющая локальн. обл. видимости

// Отыскать контейнерный элемент для оглавления.

// Если такой элемент отсутствует, создать его в начале документа,

var toc = document.getElementById("TOC");

if (!toc) {

toc = document.createElementC'div");

toc.id = "TOC";

document.body.insertBefore(toc, document.body.firstChild);

}

// Отыскать все элементы заголовков разделов

var headings;

if (document.querySelectorAll) // Возможно есть более простой путь?

headings = document.querySelectorAll(”h1,h2,h3.h4, h5. h6”);

else // Иначе отыскать заголовки более сложным способом

headings = findHeadings(document.body, []);

// Выполняет рекурсивный обход тела документа в поисках заголовков

function findHeadings(root, sects) {

for(var с = root.firstChild; c != null; c = c.nextSibling) {

if (c.nodeType !== 1) continue;

if (c.tagName.length == 2 && c.tagName.charAt(O) == "H")

sects.push(c);

else

findHeadings(c, sects);