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

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

Урок №2
Разбор кода 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()

• Category: Разное