При загрузке этой страницы вы увидите цветной фон и отображенный на нем текст:
Если вы обновите эту страницу, то увидите уже другой цвет фона. Как можно догадаться, при каждой загрузке страницы генерируется случайный цвет фона.
Первое, что мы сделаем с этим примером, — это проверим DOM и посмотрим, что здесь происходит. Убедитесь, что инструменты разработчика видимы и при этом выбрана вкладка Elements:
Здесь вы увидите текущее представление разметки страницы. Говоря более конкретно, это представление вашей DOM. Важность этого отличия в том, что это представление демонстрирует текущую версию того, как выглядит страница. Любые особенности, которые могли привнести в DOM браузер или JavaScript, будут здесь отображены.
Результат команды View source (просмотр исходного кода) в нашем примере будет выглядеть примерно так:
<!DOCTYPE html>
<html>
<head>
<title>Random Color Generator!</title>
<style>
h2 {
font-family: Arial, Helvetica;
font-size: 100px;
color: #FFF;
text-shadow: 0px 0px 11px #333333;
margin: 0;
padding: 30px;
}
</style>
</head>
<body>
<h2>Random
<br />Color
<br />Generator</h2>
<script src="js/randomColor.js"> </script>
<script>
let bodyElement = document.querySelector("body");
bodyElement.style.backgroundColor = getRandomColor();
</script>
</body>
</html>
Команда View source просто выводит представление разметки, хранящейся в HTML-странице. Иначе говоря, View source предоставляет вам (устаревшую) версию разметки, существующую на сервере, но не версию DOM.
Если вы используете инструмент разработчика для просмотра представления DOM, то увидите это представление на основе текущей версии страницы:
<!DOCTYPE html>
<html>
<head>
<title>Random Color Generator!</title>
<style>
h2 {
font-family: Arial, Helvetica;
font-size: 100px;
color: #FFF;
text-shadow: 0px 0px 11px #333333;
margin: 0;
padding: 30px;
}
</style>
<body style="background-color: rgb(75, 63, 101);">
<h2>Random
<br>Color
<br>Generator</h2>
<script src="js/randomColor.js"> </script>
<script>
let bodyElement = document.querySelector("body");
bodyElement.style.backgroundColor = getRandomColor();
</script>
</body>
</html>
Если присмотреться, то можно заметить едва уловимые различия в представлении некоторых элементов. Самое серьезное различие — это выделенный стиль background-color в элементе body, который есть только в представлении DOM, но не традиционном представлении исходного кода (View source). Причина в том, что есть JavaScript, который динамически устанавливает встроенный стиль в элементе body. Следующая врезка поясняет, почему так происходит.
Отличие представления DOM от View Source
Причина связана с тем, что представляет DOM. Еще раз повторю, что DOM — это результат завершения работы вашего браузера и JavaScript. Она показывает вам самое свежее представление, которое имитирует то, что видит браузер.
View Source — это просто статическое представление документа в том виде, в котором он находится на сервере (или на вашем компьютере). Оно не отображает текущих изменений выполняемой страницы, которые отражены в представлении DOM. Если вы взглянете на наш JavaScript код, то увидите, что я установил динамическое получение backgroundColor элементом body:
let bodyElement = document.querySelector("body");
bodyElement.style.backgroundColor = getRandomColor();
Когда этот код запускается, он изменяет DOM, чтобы установить свойство backgroundColor в элементе body. Используя View Source, вы бы никогда не увидели этого. Вообще никогда. Вот почему представление DOM из инструментов разработчика — ваш самый лучший друг.
Пример, выделяющий различия между исходником и DOM, был весьма прост. Чтобы увидеть реальную пользу представления DOM, стоит поэкспериментировать с переподчинением элементов, а также их созданием и удалением. Таким образом, вы отлично поймете различия между просмотром исходника и инспектированием DOM. Некоторые из примеров в прошлых главах, касающиеся управления DOM, могут быть полезны для аналогичных проверок.
Отладка JavaScript
Следующим важным инструментом разработчика является отладка. Не уверен, что использовал подходящее выражение, но инструменты разработчика позволяют проверить код вдоль и поперек, чтобы выяснить, есть ли в нем неполадки и в чем они. Этот процесс по-другому называется отладкой.