Основы работы с DOM в JavaScript (часть 1)

Конечная цель программирования на JavaScript - это сделать интерактивный сайт. Чтобы пользователь видел изменение на странице без её перезагрузки. Для этого необходимо изменять HTML теги с помощью JavaScript скриптов. К примеру, скрывать блоки, изменяя изменять CSS свойства. Попробуем научиться этому.

События

При взаимодействии пользователя со страницей сайта, происходит целый набор событий. Рассмотрим простейшие событие - это клик курсором мышки. Для элемента, на который произойдёт клик, можно задать особое действие с помощью специального атрибута onclick=" ". попробуем создать контейнер div с таким атрибутом:

<div onclick="alert('Мыши любят сыр!');">Кликни на меня!</div>

Теперь если кликнуть на надпись "Кликни на меня", то появится всплывающее окно: Помимо события onclick, которое вызывается в момент, когда курсор мыши находится над элементом и произошёл клик левой кнопкой, есть ещё onmousedown (кнопка мыши зажата над элементом), onmouseup (кнопка мыши отпущена над элементом). Можно пойти дальше и в событие поставить свою функцию, чтобы расширить возможности в дальнейшем. Сделаем это:

<div onclick="MyFunc();">Кликни на меня!</div>
<script>
   function MyFunc(){
      alert('Мыши любят сыр!');
   }
</script>

Можно записать на одно событие сразу несколько функций:

<div onclick="MyFunc1(); MyFunc2();">Кликни на меня!</div>
<script>
   function MyFunc1(){
      alert('Мыши любят сыр!');
   }
   function MyFunc2(){
      alert('Кот любит молоко');
   }
</script>

Выбор и изменение DOM

Поставим следующую задачу: надо сделать текстовое полу и кнопку, при нажатии на которую будет появляться всплывающее окно с текстом из поля. Чтобы реализовать это, необходимо воспользоваться функцией document.getElementById, которая возвращает указатель на определённый DOM, найденный по id. Реализуем это так:

<input type="text" value="Мыши любят сыр!" id="mydom">
<div onclick="MyFunc();">Кликни на меня!</div>
<script>
   function MyFunc(){
      var a = document.getElementById('mydom');
      alert(a.value);
   }
</script>

Как можно заметить из примера, атрибут value, записанный через точку после переменной "a" (в которой находится ссылка на DOM) выдаёт значение текстового поля. Попробуйте изменить текст и опять нажать на текст "Кликни на меня!".

Помимо value есол другие атрибуты. К пример id возвращает значение атрибута id (в нашем случае вернётся "mydom". А type вернёт значение одноименного атрибута, который в нашем случае равенtext. Единственное, что нельзя так прочитать или изменить - это атрибут class. К нему необходимо обращаться чере className.

Можно не только считывать значение атрибутов, но и устанавливать их. Попробуем переписать JS код из предыдущего примера так, чтобы при нажатии на "Кликни на меня!" текст в поле изменялся на "Кот любит молоко!":

<input type="text" value="Мыши любят сыр!" id="mydom">
<div onclick="MyFunc();">Кликни на меня!</div>
<script>
   function MyFunc(){
      var a = document.getElementById('mydom');
      a.value = 'Кот любит молоко!';
   }
</script>

Как в случае с чтением, можно менять не только значение атрибута value, но и задавать другой id и type.

Существует возможность сокращённой записи через точку. Благодаря которой можно переписать предыдущий пример так, чтобы не использовать лишнюю переменную:

<input type="text" value="Мыши любят сыр!" id="mydom">
<div onclick="MyFunc();">Кликни на меня!</div>
<script>
   function MyFunc(){
      document.getElementById('mydom').value = 'Кот любит молоко!';
   }
</script>

Обращение к самому себе (this)

Придумаем задачу: необходимо изменить текст на кнопке, на которую нажали. Если воспользоваться знаниями из предыдущих параграфов этой статьи, то можно придумать такой JS код:

<div id="mydom" onclick="MyFunc();">Кликни на меня!</div>
<script>
   function MyFunc(){
      var a = document.getElementById('mydom');
      a.value = 'Кот любит молоко!';
   }
</script>

И это будет верным решением. Но придётся закрепить за этой кнопкой свой id (он должен быть уникальным на всю страницу), а так же использовать лишнюю переменную "a", в которую записывается указатель на элемент. К счастью, в JavaScript есть зарезервированные слово this (переводится как "Это"), которая уже является готовой ссылкой на объект. Попробуем использовать эту ссылку, передадим её как параметр функции MyFunc. Получится так:

<div onclick="MyFunc(this);">Кликни на меня!</div>
<script>
   function MyFunc(a){
      a.value = 'Кот любит молоко!';
   }
</script>

Изменение CSS свойств JS

В JavaScript существует возможность изменять CSS свойства объектов (изменять значение атрибута style). Чтобы продемонстрировать как это делается, придумаем задачу: необходимо изменить цвет текста на красный при клике на него. Запрограммируем это, модифицировав пример из предыдущего пункта:

<div onclick="MyFunc(this);">Кликни на меня!</div>
<script>
   function MyFunc(a){
      a.style.color = 'red';
   }
</script>

Как можно видеть из примера, чтобы изменить атрибут style, необходимо действовать точно так же как и с value, но после написания поставить точку и указать определённый CSS атрибут. В примере было использовано свойство color, которое состоит из одного слова. Но если нужно изменить свойтсво с дефисом, то необходимо записывать его без дефиса и с большими буквами в середине. Продемоснтрируем это на свойстве "font-size":

<div onclick="MyFunc(this);">Кликни на меня!</div>
<script>
   function MyFunc(a){
      a.style.color = 'red';
      a.style.fontSize = '20px';
   }
</script>