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

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

 var headings;

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

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

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

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

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

 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);

 }

 return sects;

 }

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

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

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

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

 var heading = headings[h];

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

 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(".")

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

 // чтобы его можно было стилизовать с помощью 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; // Текст ссылки совпадает

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

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

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

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

 entry.className = "TOCEntry TOCLevel" + level;

 entry.appendChild(link);

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

 toc.appendChild(entry);

 }

});

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

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