Использование элементов DOM через JavaScript getElementById

Создание динамических страниц предполагает непосредственный доступ к существующим элементам, создание новых и изменение их свойств. Использование метода document.getElementById JavaScript позволяет найти элемент страницы с указанным идентификатором и изменить его свойства.

Метод применим ко всем тегам HTML, которые имеют уникальный идентификатор «id». В основном его используют для изменения свойств и содержания тегов «div».

Элементы страницы

Формат гипертекста HTML позволяет описывать уникальные элементы и элементы классов. По определению уникальный элемент всегда один на странице, а элементов классов может быть множество.

При загрузке страницы она преобразуется в дерево DOM, в котором каждый элемент занимает свое собственное место. Существует множество способов движения по дереву элементов, но при наполнении страницы информацией и изменении свойств её элементов часто достаточно обратиться к уникальному элементу по его идентификатору.

Пример описания уникальных элементов

В таблице CSS были сделаны описания трех дивов: шапки страницы, содержания страницы и ее футера (подвала). Соответственно наименования идентификаторов: scHeader, scContent и scFooter.

В разделе «body» вставлено описание переменных JavaScript: iLoadHeight, iLoadWidth и по каждому диву его координат по оси Y и размеров по вертикали. Координаты по оси X равны нулю, а размер по этой оси равен ширине окна браузера.

Дополнительно описаны переменные для доступа к элементам: dHeader, dContent и dFooter.

При помощи метода JavaScript getElementById переменные dHeader, dContent и dFooter получили значения реальных дивов и были использованы для позиционирования в формате текущего размера окна браузера.

В контексте данного примера наличие переменных шапки, содержания и футера позволяет изменять их свойства таким образом, чтобы они всегда находились в нужном месте и имели правильные размеры при изменении размера окна браузера.

Основые свойства элементов

Основное назначение метода JavaScript getElementById изменять содержание и свойства элемента. Как правило, первое выполняется выражением присваивания:

  • dHeader.innerHTML = 'Start: Y=' + iHeaderCooY + '; H=' + iHeaderSizeY;
  • dContent.innerHTML = 'Start: Y=' + iContentCooY + '; H=' + iContentSizeY;
  • dFooter.innerHTML = 'Start: Y=' + iFooterCooY + '; H=' + iFooterSizeY;

Эти три выражения заполняют содержимое тегов информацией о том, какую они получили координату по оси Y и какова их высота по вертикали.

Свойство innerHTML позволяет помещать в тег любые другие теги, то есть можно формировать сколь угодно сложное внутреннее форматирование любого уникального элемента страницы.

В частности, в любой момент времени можно форматировать шапку, содержание страницы и футер так, как это необходимо. Вставляя внутрь этих тегов другие теги, можно ссылаться на классы и на другие идендификаторы, описанные в правилах CSS.

Частое применение метода JavaScript getElementById - изменение свойств элементов. В данном контексте понимается динамическое изменение правил CSS. Эти правила доступны через общее свойство «style», которое включает в себя практически все свойства (правила) CSS. В приведеннном примере были использованы правила «style.top», «style.left». Аналогично можно изменять и другие правила элементов страницы.

Третий момент, когда метод JavaScript getElementById значительно упрощает труд разработчика: группировка и разборка тегов в конкретном уникальном элементе. Например, в раздел содержания страницы помещена таблица информации, выполненная в виде тегов, именованных по строчкам и столбцам конкретным образом. Необходимо всё прочитать и обработать, сохранив исходное положение и оформление.

Комментарии