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

Флэнаган Дэвид
Шрифт:

}

return sects;

}

// Инициализировать массив, хранящий номера разделов,

var sectionNumbers = [0,0,0,0,0,0];

// Выполнить цикл по найденным элементам заголовков.

for(var h = 0; h < headings.length; h++) {

var heading = headings[h];

// Пропустить заголовки, находящиеся в контейнере оглавления,

if (heading.parentNode == toc) continue;

// Определить уровень заголовка.

var level = parseInt(heading.tagName.charAt(1));

if (isNaN(level) || level < 1 || level > 6) continue;

// Увеличить номер раздела для этого уровня и установить

// номера разделов более низкого уровня равными нулю.

sectionNumbers[level-1]++;

for(var і = level; і < 6; і++) sectionNumbers[i] = 0;

// Объединить номера разделов всех уровней,

// чтобы получился номер вида 2.3.1.

var sectionNumber = sectionNumbers.slice(0,level).join(".")

// Добавить номер раздела в заголовок. Номер помещается в элемент <span>,

// чтобы его можно было стилизовать с помощью CSS.

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

span.className = "TOCSectNum";

span.innerHTML = sectionNumber;

heading.insertBefore(span, heading.firstChild);

// Обернуть заголовок якорным элементом, чтобы можно было

// сконструировать ссылку на него.

var anchor = document.сreateElement("а");

anchor.name = "TOC"+sectionNumber;

heading.parentNode.insertBefore(anchor, heading);

anchor.appendChild(heading);

// Создать ссылку на этот раздел,

var link = document.createElement("а");

link.href = "#T0C" + sectionNumber; // Адрес назначения ссылки

link.innerHTML = heading.innerHTML; // Текст ссылки совпадает

// с текстом заголовка

// Поместить ссылку в элемент div, чтобы обеспечить возможность

// стилизации в зависимости от уровня.

var entry = document.сreateElement("div");

entry.className = "TOCEntry TOCLevel" + level;

entry.appendChild(link);

// И добавить элемент div в контейнер оглавления,

toc.appendChild(entry);

}

});

15.8. Геометрия документа и элементов и прокрутка

До сих пор в этой главе мы рассматривали документы как некие абстрактные деревья элементов и текстовых узлов. Но когда броузер отображает документ в своем окне, он создает визуальное представление документа, в котором каждый элемент имеет определенную позицию и размеры. Часто веб-приложения могут интерпретировать документы как деревья элементов и никак не заботиться о том, как эти элементы отображаются на экране. Однако иногда бывает необходимо определить точные геометрические характеристики элемента. Например, в главе 16 мы увидим, что элемент можно поместить в определенную позицию с помощью CSS. Если вам потребуется использовать CSS для динамического позиционирования элемента (такого как всплывающая подсказка или сноска) рядом с элементом, который позиционируется броузером, вам необходимо иметь возможность определять положение этого элемента.