Внедрение DOM
Внедрение DOM в HTML-документ
Внедрение DOM
В введении, мы рассмотрели скрипт, с помощью которого можно изменять внешность элемента 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
Спасибо большое за статьи. Особенно за JavaScript долгое время искал как лучше приступить к изучению языкам программирования. Начал с видеокурсов но для понимания сложновато. После Ваших статей все стало достаточно ясно и понятно. Буду рекомендовать данный сайт как основу к изучению JS , лучше статей я не встречал. Большое спасибо!!!!
Пожалуйста отредактируйте элемент с выделением кода DOM
Здравствуйте, выделил.