JavaScript с нуля
- Автор: Кирупа Чиннатамби
- Жанр: Образование
- Дата выхода: 2021
- Цикл: Библиотека программиста
Читать книгу "JavaScript с нуля"
Просмотр DOM
Первый инструмент разработчика, который мы рассмотрим, позволяет просматривать и даже манипулировать содержимым DOM. Запустив Chrome, пройдите по ссылке http://bit.ly/kirupaDevTool.
НЕТ БРАУЗЕРА? БЕЗ ПРОБЛЕМ!
Если у вас нет браузера под рукой или вы просто не можете получить доступ к этой ссылке, не волнуйтесь. Я буду объяснять, что происходит на каждом этапе пути, чтобы вы не остались в стороне.
При загрузке этой страницы вы увидите цветной фон и отображенный на нем текст:
Если вы обновите эту страницу, то увидите уже другой цвет фона. Как можно догадаться, при каждой загрузке страницы генерируется случайный цвет фона.
Первое, что мы сделаем с этим примером, — это проверим DOM и посмотрим, что здесь происходит. Убедитесь, что инструменты разработчика видимы и при этом выбрана вкладка Elements:
Здесь вы увидите
Результат команды 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. Она показывает вам самое свежее представление, которое имитирует то, что видит браузер.
let bodyElement = document.querySelector("body");
bodyElement.style.backgroundColor = getRandomColor();
Когда этот код запускается, он изменяет DOM, чтобы установить свойство backgroundColor в элементе body. Используя View Source, вы бы никогда не увидели этого. Вообще никогда. Вот почему представление DOM из инструментов разработчика — ваш самый лучший друг.
Пример, выделяющий различия между исходником и DOM, был весьма прост. Чтобы увидеть реальную пользу представления DOM, стоит поэкспериментировать с переподчинением элементов, а также их созданием и удалением. Таким образом, вы отлично поймете различия между просмотром исходника и инспектированием DOM. Некоторые из примеров в прошлых главах, касающиеся управления DOM, могут быть полезны для аналогичных проверок.
