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

Методът е приложим за всички HTML тагове, които имат уникален идентификатор. По принцип се използва за промяна на свойствата и съдържанието на таговете "div".

Елементи на страницата

Хипертекстовият формат на HTML ви позволява да опишете уникалните елементи и елементите на класа. По дефиниция, уникалният елемент винаги е един на страница и елементите на класа могат да бъдат зададени.


Когато страницата е заредена, тя се преобразува в DOM дърво, в което всеки елемент заема своето място. Има много начини за преместване на дървото на елементите, но когато попълните страницата с информация и промените свойствата на нейните елементи, често е достатъчно да се отнесете към уникален елемент по неговия номер.

Пример за описание на уникални елементи

В таблицата CSS са направени описания на три девици: заглавия на страници, съдържание на страници и обувки (сутерен). Съответно, имената на идентификаторите: scHeader, scContent и scFooter."Вмъкнах описанието на javascript променливите: iLoadHeight, iLoadWidth и всяко чудо на неговите координати по оста Y и вертикалните размери. Координатите по оста Х са нула, а размерът на тази осе равна на ширината на прозореца на браузъра. Незадължителни променливи за достъп до елементи: dHeader, dContent и dFooter.Използване на javascript метода Променливите на getElementById, dHeader, dContent и dFooter са получили реални невалидни стойности и са използвани за позициониране на текущия размер на прозореца на браузъра. В контекста на този пример, наличието на променливи в заглавието, съдържанието и долния колонтитул ви позволява да променяте техните свойства по такъв начин, че винаги да са на правилното място и да имат правилните размери при промяна на размера на прозореца на браузъра.

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

Основната цел на метода на javascript getElementById е да промени съдържанието и свойствата на даден елемент. Като правило първото се изпълнява чрез израз на присвояване:

dHeader.innerHTML = 'Старт: Y =' + iHeaderCooY + '; H = '+ iHeaderSizeY;

dContent.innerHTML = 'Старт: Y =' + iContentCooY + '; H = '+ iContentSizeY;

dFooter.innerHTML = 'Старт: Y =' + iFooterCooY + '; H = '+ iFooterSizeY;

Тези три изявления запълват съдържанието на етикетите с информация за това какво имат координатите Y и каква е тяхната височина вертикално. Свойството innerHTML ви позволява да поставяте всякакви други тагове в маркера, т.е. можете да създавате произволно сложно вътрешно форматиране на всеки уникален елемент на страницата. По-специално, по всяко време можете да форматирате заглавието, съдържанието на страницата и долния колонтитул, ако е необходимо. Чрез вмъкване на други тагове в тези тагове, можете да се позовавате на класовете и другите идентификатори, описани в CSS правилата.Честото прилагане на методаjavascript getElementById - промяна на свойствата на елементите. В този контекст се разбира динамичната промяна на правилата на CSS. Тези правила са достъпни чрез общото свойство на "style", което включва почти всички свойства (правила) на CSS. В примера по-горе бяха използвани правилата на "style.top", "style.left". По същия начин можете да промените други правила на елементите на страницата. Третият път, че методът на javascript getElementById значително опростява работата на разработчика: групиране и демонтиране на тагове в конкретен уникален елемент. Например в раздела със съдържанието на страницата се поставя таблица с информация, изпълнена под формата на тагове, наречена след редовете и колоните по определен начин. Всичко трябва да бъде прочетено и обработено, запазвайки оригиналната позиция и дизайн.