Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Учебник DOM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Типичная схема практически любой программы с использованим DOM, заключается в следующем:
1. активировать событие,
2. запустить обработчик события,
2. выбрать элемент страницы (HTML-тег),
3. произвести с элементом страницы, различные манипуляции.

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

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

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

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

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget