Учебник DOM
Учебник DOM для начинающих
Учебник DOM
В данном учебнике по DOM для начинающих, вы узнаете как управлять элементами страницы (HTML-тегами). Чтобы управлять элементами страницы, нужно запустить событие, которое в свою очередь вызывает функцию (обработчик события). В качестве события например может выступать нажатие по кнопке.
Благодаря DOM, можно мгновенно изменять внешность и содержимое элементов страницы. Мгновенно — в данном контексте означает, что элементы страницы будут изменяться не обновляя (перезагружая) страницу целиком. Рассмотрим данные процессы более подробно.
Мгновенное изменение объектов в DOM
Интересной особенностью технологии DOM является то, что управляя объектами, их характеристики меняются мнговенно, страница при этом не перезагружается.
Давайте рассмотрим небольшой пример использования DOM, нажмите на кнопку расположенную ниже и текст мгновенно изменит свою внешность (шрифт станет больше по размеру).
Обновите (перезагрузите) страницу (например, нажмите на клавиатуре кнопку F5), чтобы привести внешность элемента к первоначальному виду.
Рассмотрим еще один скрипт, который будет изменять не внешность элемента, а его текст.
Как устроены данные скрипты, мы рассмотрим в следующих уроках.
Важные части DOM
Когда вы будете создавать скрипты работающие с DOM и влияющие на элементы страницы, вы часто будете использовать в своих программах следующие объекты и функции:
события — различные события, которые запускают пользовательские функции (обработчики событий), изменяющие элементы страницы,
пользовательская функция — обработчик события, функция в которой расположен код, изменяющий элемент,
document — объект обозначающий весь HTML-документ,
getElementById() — функция позволяющая находить элементы страницы, по значению их атрибута id (уникальный идентификатор, адрес элемента),
style — объект содержащий в себе все CSS-свойства.
Типичная схема практически любой программы с использованим DOM, заключается в следующем:
- Активировать событие,
- Запустить обработчик события,
- Выбрать элемент страницы (HTML-тег),
- Произвести с элементом страницы, различные манипуляции.
Читать далее: Внедрение DOM