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

Внедрение DOM

Внедрение DOM в HTML-документ

Урок №1
Внедрение DOM
Внедрение DOM в HTML-документ, для начинающих.

В введении, мы рассмотрели скрипт, с помощью которого можно изменять внешность элемента HTML-страницы:

Изменяем внешность элемента на лету, нажав на кнопку!

Код данного скрипта выглядит следующим образом:

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

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

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

DOM внедряется в HTML-документ, с помощью тегов JavaScript <script> </script>, в данных тегах размещают код DOM и JavaScript. Теги <script> </script> обычно располагают в голове HTML-документа, между тегами <head> </head>.

Ниже расположен HTML-документ, где код с JavaScript и DOM, выделен красным цветом:

<!DOCTYPE html>
<html>
 <head>
  <title>Внедрение DOM в HTML-документ</title>
  <script>
   function getChangeEl() {
    document.getElementById("changeEl").style.fontSize="25px";
   }
  </script>
 </head>
 <body>

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

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

 </body>
</html>

Открыв в браузере данный HTML-документ вы получите следующее.

HTML-документ, что выше, состоит из трёх частей я их выделил разными цветами: красным, зелёным и синим:
— красным выделен код, относящийся к скрипту (функция — обработчик события),
— зелёным выделен элемент (тег div имеющий id=changeEl), который будет изменён скриптом,
— синим выделено событие (кнопка), которые запускает скрипт.

В следующем уроке мы рассмотрим каждую часть более подробно.

Читать далее: Разбираем код DOM

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

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

2 комментария на «“Внедрение DOM”»

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

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

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