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

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

События

При взаимодействии пользователя со страницей сайта, происходит целый набор событий. Рассмотрим простейшие событие - это клик курсором мышки. Для элемента, на который произойдёт клик, можно задать особое действие с помощью специального атрибута onclick=" ". попробуем создать контейнер div с таким атрибутом:
<div onclick="alert('Мыши любят сыр!');">Кликни на меня!</div>
Теперь если кликнуть на надпись "Кликни на меня", то появится всплывающее окно:
Внутри атрибута события стоит использовать одинарные кавычки, потому что двойными закрывается значение атрибута. Поэтому в примере использовались именно одинарные кавычки. Но если написать двойные: onclick="alert("Мыши любят сыр!");" , то код не сработает. В таком случае надо использовать двойные кавычки, экранированные символом "\", чтобы получилось так: onclick="alert(\"Мыши любят сыр!\");".
Помимо события 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

Если сказать упрощённо, то DOM (от англ. Document Object Model - «объектная модель документа») - это то, как можно представить структурированную страницу, к примеру HTML. А представить HTML можно в виде дерева, узлы которого будут элементами (тегами)
Поставим следующую задачу: надо сделать текстовое полу и кнопку, при нажатии на которую будет появляться всплывающее окно с текстом из поля. Чтобы реализовать это, необходимо воспользоваться функцией 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>
Свойство float является исключением, поэтому его надо записывать как "cssFloat". Чтобы получилост так: a.style.cssFloat = 'right';
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: