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

Разбираем код DOM

Разбираем код DOM, для начинающих

Урок №2
Разбор кода DOM
Разбираем код DOM.

В прошлом уроке, мы рассмотрели код, который изменяет внешний вид элемента HTML-страницы:

<script>
 function getChangeEl() {
  document.getElementById("changeEl").style.fontSize="25px";
 }
</script>

<div id="changeEl">
 Изменяем внешность элемента на лету, нажав на кнопку!</div>

<input type="button" value="Кнопка" onclick="getChangeEl()" />

Работа данного кода происходит, следующим образом:
— посетитель сайта, нажимает по кнопке input,
— кнопка запускает пользовательскую функцию getChangeEl(),
— в функции расположен код, изменяющий внешний вид элемента (changeEl) страницы.

Рассмотрим кнопку input, у ней имеется атрибут onclick=" ", являющийся событием. Событие onclick=" " происходит, когда пользователь жмёт по кнопке (щелчок левой кнопкой мыши).

Значением атрибута события onclick=" " выступает пользовательская функция getChangeEl(), которая запускается при срабатывании события (в нашем случае при щелчке мышью по кнопке). Как мы знаем из учебника по JavaScript, пользовательским функциям имена мы придумываем сами.

Рассмотрим функцию getChangeEl() { }, в ней находится строка которая изменяет элемент страницы, в нашем случае увеличивает шрифт элемента.

document.getElementById("changeEl").style.fontSize="25px";

Давайте разбирем данную строку:
document — это встроенный объект технологии DOM, хранящий в себе все элементы (HTML-теги) открытой страницы,
getElementById("значениеId") — это встроенная функция технологии DOM, осуществляет поиск по элементам открытой страницы. Поиск элемента осуществляется по значению его атрибута id=" ",
style — это встроенный объект технологии DOM, хранящий в себе все CSS-свойства,
fontSize="25px" — свойство объекта style, со значением, аналог CSS-кода font-size: 25px

Рассмотрим элемент, который подвергается изменению. В нашем случае это элемент div, ему мы присвоили атрибут id=" ", со значением changeEl, имя для значения мы придумываем сами.

По значению id (адресу), скрипт находит элементы на странице и изменяет их.

Читать далее: Функция getElementById()

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

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

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

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

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