Основы работы с 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мотрите другие статьи:
Была ли статья полезной?
Была ли эта статья полезна? Есть вопрос?
хостинг для сайтов
Закажите недорогой хостинг Заказать

всего от 290 руб

⇡ наверх