Учебник DOM

Учебник DOM для начинающих

Введение
Учебник DOM
Учебник для начинающих по веб-технологии DOM.

В данном учебнике по DOM для начинающих, вы узнаете как управлять элементами страницы (HTML-тегами). Чтобы управлять элементами страницы, нужно запустить событие, которое в свою очередь вызывает функцию (обработчик события). В качестве события например может выступать нажатие по кнопке.

Благодаря DOM, можно мгновенно изменять внешность и содержимое элементов страницы. Мгновенно — в данном контексте означает, что элементы страницы будут изменяться не обновляя (перезагружая) страницу целиком. Рассмотрим данные процессы более подробно.

Мгновенное изменение объектов в DOM

Интересной особенностью технологии DOM является то, что управляя объектами, их характеристики меняются мнговенно, страница при этом не перезагружается.

Давайте рассмотрим небольшой пример использования DOM, нажмите на кнопку расположенную ниже и текст мгновенно изменит свою внешность (шрифт станет больше по размеру).

Изменяем внешность элемента на лету, нажав на кнопку!

Обновите (перезагрузите) страницу (например, нажмите на клавиатуре кнопку F5), чтобы привести внешность элемента к первоначальному виду.

Рассмотрим еще один скрипт, который будет изменять не внешность элемента, а его текст.

Изменяем текст на лету, нажав на кнопку!

Как устроены данные скрипты, мы рассмотрим в следующих уроках.

Важные части DOM

Когда вы будете создавать скрипты работающие с DOM и влияющие на элементы страницы, вы часто будете использовать в своих программах следующие объекты и функции:
события — различные события, которые запускают пользовательские функции (обработчики событий), изменяющие элементы страницы,
пользовательская функция — обработчик события, функция в которой расположен код, изменяющий элемент,
document — объект обозначающий весь HTML-документ,
getElementById() — функция позволяющая находить элементы страницы, по значению их атрибута id (уникальный идентификатор, адрес элемента),
style — объект содержащий в себе все CSS-свойства.

Типичная схема практически любой программы с использованим DOM, заключается в следующем:

  1. Активировать событие,
  2. Запустить обработчик события,
  3. Выбрать элемент страницы (HTML-тег),
  4. Произвести с элементом страницы, различные манипуляции.

Читать далее: Внедрение DOM


Дата публикации поста: 3 апреля 2019
Дата обновления поста: 16 октября 2014
Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *