Объектная модель документа, динамический HTML. Объекты, их свойства и методы. Обработчики событий. Формулировка свойств CSS в объектной модели. Метод getElementById.

Описать структуру web-страниц можно с помощью объектов. Точнее, сложной иерархии объектов, вложенных друг в друга и зависящих друг от друга. Такая структура называется объектной моделью документа (Document Object Model, DOM). Все современные программы web-обозревателей представляют web-страницу как иерархический набор объектов.

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

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

Именно такой подход был положен в основу динамической модели HTML

Dynamic HTML или DHTML— это способ создания интерактивного веб-сайта, использующий сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа).

Он может быть использован для создания приложения в веб-браузере: например для более простой навигации или для придания интерактивности форм.

Объект — некоторый элемент модели с набором свойств и методов (например, теги html).

Свойство — свойство объекта, которое может быть изменено или считано (прежде всего св-ва CSS, разница в разделении слов в свойствах: в CSS '_', а в объектн.модели используется прописная буква getElementById).

Метод — функция манипулирования объектом (например, window.close() — закрыть окно).

Обработчики событий предназначены для связи событий с методами и функциями, определёнными сценарием. Для каждого объекта существует определённый набор событий, расширяемый с каждой версией JavaScript.

document.getElementById("{Имя}") — метод JavaScript.

Метод возвращает ссылку на первый элемент страницы с заданным именем (значением атрибута ID).

Например,

<input type="text" name="your_name" id="your_name_input" />

<script type="text/javascript">

var name_input = document.getElementById('your_name_input')

name_input.value="Medved"

</script>

<span onClick=”document.getElementById('46').style.color='red';”>что-то</span> - при нажатии на «что-то» объект, ID которого 46 становится красным.

Если искомого элемента не существует, то getElementById возвращает null.