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

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 для динамического позиционирования элемента (такого как всплывающая подсказка или сноска) рядом с элементом, который позиционируется броузером, вам необходимо иметь возможность определять положение этого элемента.

В этом разделе рассказывается, как можно переходить от абстрактной, древовидной модели документа к геометрическому, основанному на системе координат визуальному представлению документа в окне броузера, и обратно. Свойства и методы, описываемые здесь, реализованы в броузерах достаточно давно (хотя есть некоторые, которые до недавнего времени присутствовали только в ІЕ, а некоторые не были реализованы в ІЕ до появления версии ІЕ9). К моменту написания этих строк они проходили процесс стандартизации консорциумом W3C в виде стандарта «CSSOM-View Module» .

15.8.1. Координаты документа и видимой области

Позиция элемента измеряется в пикселах. Координата X растет слева направо, а координата Y - сверху вниз. Однако существуют две точки, которые мы можем считать началом координат: координаты X и Y элемента могут отсчитываться относительно верхнего левого угла документа или относительно верхнего левого угла видимой области. Для окон верхнего уровня и вкладок «видимой областью» является часть окна броузера, в которой фактически отображается содержимое документа: в нее не входит обрамление окна (меню, панели инструментов, вкладки). Для документов, отображаемых во фреймах, видимой областью является элемент

<iframe>

, определяющий фрейм. В любом случае, когда речь заходит о позиции элемента, необходимо знать, какая система координат используется - относительно начала документа или относительно начала видимой области. (Координаты видимой области видимости иногда называют оконными координатами.)