Мы можем автоматически подсветить весь код страницы, перебирая в цикле все элементы >

, у которых есть атрибут >data-language, и вызывая на каждом >highlightCodeс правильной регуляркой.
>var languages = {
>  javascript: /\b(function|return|var)\b/g /* … etc */
>};

>function highlightAllCode() {
>  var pres = document.body.getElementsByTagName("pre");
>  for (var i = 0; i < pres.length; i++) {
>    var pre = pres[i];
>    var lang = pre.getAttribute("data-language");
>    if (languages.hasOwnProperty(lang))
>      highlightCode(pre, languages[lang]);
>  }
>}
Вот пример:
>
>
А вот и она, функция идентификации:
>
>function id(x) { return x; }
Есть один часто используемый атрибут, >class, имя которого является ключевым словом в JavaScript. По историческим причинам, когда старые реализации JavaScript не умели обращаться с именами свойств, совпадавшими с ключевыми словами, этот атрибут доступен через свойство под названием >className. Вы также можете получить к нему доступ по его настоящему имени >class через методы >getAttribute и >setAttribute.

Вы могли заметить, что разные типы элементов располагаются по-разному. Некоторые, типа параграфов >

и заголовков >

растягиваются на всю ширину документа и появляются на отдельных строках. Такие элементы называют блочными. Другие, как ссылки > или жирный текст > появляются на одной строчке с окружающим их текстом. Они называются встроенными (inline).

Для любого документа браузеры могут построить расположение элементов, расклад, в котором у каждого будет размер и положение на основе его типа и содержимого. Затем этот расклад используется для создания внешнего вида документа.

Размер и положение элемента можно узнать через JavaScript. Свойства >offsetWidth и >offsetHeight выдают размер в пикселях, занимаемый элементом. Пиксель – основная единица измерений в браузерах, и обычно соответствует размеру минимальной точки экрана. Сходным образом, >clientWidth и >clientHeight дают размер внутренней части элемента, не включая ширину его границ (border).

>

>  Я в коробочке

>

>

Самый эффективный способ узнать точное расположение элемента на экране – метод >getBoundingClientRect. Он возвращает объект со свойствами >top, >bottom, >left, и >right (сверху, снизу, слева и справа), которые содержат положение элемента относительно левого верхнего угла экрана в пикселях. Если вам надо получить эти данные относительно всего документа, вам надо прибавить текущую позицию прокрутки, которая содержится в глобальных переменных