JavaScript с нуля - [65]
Секрет происходящего кроется в самом коде. Давайте вернемся назад, взглянем на код внутри тега script и попытаемся разобраться в происходящем:
let bodyElement = document.querySelector("body");
let textElement = document.querySelector(".message");
На самом верху есть переменная bodyElement, которая ссылается на элемент body в нашем HTML. Также есть переменная textElement, ссылающаяся на элемент p со значением класса message. Здесь нет ничего необычного.
А дальше уже интереснее. Есть функция-таймер setInterval, вызывающая функцию sayWhat каждые 1000 миллисекунд (1 секунду):
setInterval(sayWhat, 1000);
Сам процесс клонирования происходит внутри функции sayWhat:
function sayWhat() {
let clonedText = textElement.cloneNode(true);
bodyElement.appendChild(clonedText);
}
Мы вызываем cloneNode для textElement. В результате этого создается копия textElement, которая хранится как часть переменной clonedText. Последним шагом добавляем созданный элемент в DOM, чтобы он начал отображаться. Благодаря функции setTimer весь код после sayWhat повторяется и продолжает добавлять клонированный элемент на страницу.
Вы могли заметить, что мы клонируем следующий элемент абзаца:
В коде же мы указали следующее:
let clonedText = textElement.cloneNode(true);
Мы вызываем cloneNode с флагом true, обозначая, что хотим клонировать и всех потомков. Зачем? Ведь у нашего элемента абзаца, кажется, нет потомков. Что ж, именно здесь и проявляется различие между elements и nodes. Тег абзаца не имеет дочерних elements, но текст, обернутый тегом p, является дочерним node. Этот нюанс важно учитывать, когда вы клонируете что-либо и в итоге получаете не то, что хотели, указав, что потомков клонировать не нужно.
КОРОТКО О ГЛАВНОМ
Подытожим: DOM можно не только использовать, но и всячески изменять. Мы уже мимоходом обсуждали, как все в DOM может быть изменено, но именно здесь впервые увидели глубину и ширину доступных изменений, которые можно производить с помощью таких методов, как createElement, removeElement, remove и cloneNode.
Изучив весь этот материал, вы сможете начать с абсолютно чистой страницы и с помощью всего нескольких строк JavaScript-кода заполнить ее всем необходимым:
30. Браузерные инструменты разработчика
Серьезные браузеры — Google Chrome, Apple Safari, Mozilla Firefox и Microsoft Edge (бывший Internet Explorer) — не только отображают страницы. Они дают разработчикам доступ к богатой и интересной функциональности, позволяющей разобраться в том, что именно происходит на отображаемой странице. Эта возможность реализована в так называемых инструментах разработчика, которые встроены в браузер и позволяют работать с HTML, CSS и JavaScript всяческими изощренными способами.
Рассмотрим здесь эти инструменты и узнаем, как с их помощью облегчить себе жизнь.
Поехали!
Я ИСПОЛЬЗУЮ GOOGLE CHROME
В следующих примерах я буду использовать браузер Google Chrome. Хотя в любом браузере есть аналогичные функции, интерфейс и шаги, которые необходимо выполнить, будут различаться. Просто помните об этом, а также обратите внимание, что версия Chrome может быть новей, чем та, которая используется в этой главе.
Знакомство с инструментами разработчика
Начнем с азов. Когда вы переходите на веб-страницу, браузер загружает тот документ, который ему велено загружать:
Выглядит знакомо, так как эта часть функционала особо не менялась с момента выпуска первого браузера в 1800-х или когда его там выпустили. Если используете Chrome, нажмите Cmd-Opt-I для Mac или F12 (или Ctrl + Shift + I) для Windows.
Нажмите нужные клавиши и посмотрите, что произойдет. Тревожная музыка, сопровождаемая землетрясением и лазерными выстрелами, скорее всего, не зазвучит, но совершенно точно изменится макет страницы браузера. Он покажет нечто загадочное. Обычно это изменение происходит в нижней или правой части экрана, как показано на рис. 30.1.
Рис. 30.1. Браузер с активированными инструментами разработчика внизу экрана
Браузер разделится на две части. Одна из них отвечает за отображение веб-страниц. Мы с ней уже знакомы, и она нам очень нравится. Вторая же — новая часть — предоставляет доступ к информации о странице, отображаемой в данный момент. Ее уже может оценить только разработчик вроде нас с вами. Эта часть и называется инструментами разработчика.
Инструменты разработчика предоставляют следующие возможности:
• Просмотр DOM.
• Отладка JavaScript.
• Проверка объектов и просмотр сообщений через консоль.
• Определение производительности и обнаружение проблем с памятью.
• Просмотр сетевого трафика
…и многое другое!
В целях экономии времени (скоро начнется очередная серия «Игры престолов», и я верю, что в этом эпизоде Нед Старк вернется в виде лютоволка) я сконцентрируюсь на первых трех пунктах, так как они непосредственно относятся к тому, что вы изучаете в этой книге.
