Використання елементів DOM через JavaScript getElementById

Створення динамічних сторінок передбачає безпосередній доступ до існуючих елементів, створення нових і зміна їх властивостей. Використання методу document.getElementById jаvascript дозволяє знайти елемент сторінки з вказаним ідентифікатором і змінити його властивості. Метод застосовний до всіх тегами HTML, які мають унікальний ідентифікатор «id». В основному його використовують для зміни властивостей і змісту тегів «div».

Елементи сторінки

Формат гіпертексту HTML дозволяє описувати унікальні елементи і елементи класів. За визначенням унікальний елемент завжди один на сторінці, а елементів класів може бути безліч.


При завантаженні сторінки вона перетворюється в дерево DOM, в якому кожен елемент займає своє власне місце. Існує безліч способів руху по дереву елементів, але при наповненні сторінки інформацією та зміні властивостей її елементів часто досить звернутися до унікального елемента за його номером.

Приклад опису унікальних елементів

В таблиці CSS були зроблені описи трьох дівов: шапки сторінки, змісту сторінки і її футера (підвалу). Відповідно найменування ідентифікаторів: scHeader, scContent і scFooter. В розділі «body» вставлено опис змінних jаvascript: iLoadHeight, iLoadWidth і по кожному диву його координат по осі Y та розмірів по вертикалі. Координати по осі X дорівнюють нулю, а розмір цієї осі дорівнює ширині вікна браузера. Додатково описані змінні для доступу до елементів: dHeader, dContent і dFooter. За допомогою методу jаvascript getElementById змінні dHeader, dContent і dFooter отримали значення реальних дівов і були використані для позиціонування у форматі поточного розміру вікна браузера. В контексті даного прикладу наявність змінних шапки, змісту і футера дозволяє змінювати їх властивості таким чином, щоб вони завжди перебували в потрібному місці і мали правильні розміри при зміні розміру вікна браузера.

Основні властивості елементів

Основне призначення методу jаvascript 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. Часте застосування методу jаvascript getElementById - зміна властивостей елементів. В даному контексті розуміється динамічна зміна правил CSS. Ці правила доступні через загальне властивість «style», яке включає в себе практично всі властивості (правила) CSS. У приведеннном прикладі були використані правила «style.top», «style.left». Аналогічно можна змінювати та інші правила елементів сторінки. Третій момент, коли метод jаvascript getElementById значно спрощує працю розробника: групування та розбирання тегів в конкретному унікальному елементі. Наприклад, у розділ змісту сторінки поміщена таблиця інформації, виконана у вигляді тегів, іменованих за рядками і стовпцями конкретним чином. Необхідно все прочитати і опрацювати, зберігши вихідне положення і оформлення.