Внедрение 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


Дата публикации поста: 3 апреля 2019
Дата обновления поста: 16 октября 2014

3 Replies to “Внедрение DOM”

  1. Спасибо большое за статьи. Особенно за JavaScript долгое время искал как лучше приступить к изучению языкам программирования. Начал с видеокурсов но для понимания сложновато. После Ваших статей все стало достаточно ясно и понятно. Буду рекомендовать данный сайт как основу к изучению JS , лучше статей я не встречал. Большое спасибо!!!!

    Ответить

  2. Евгений 03.08.2015 at 15:43

    Пожалуйста отредактируйте элемент с выделением кода DOM

    Ответить

    1. Здравствуйте, выделил.

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

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