JavaScript с нуля
- Автор: Кирупа Чиннатамби
- Жанр: Образование
- Дата выхода: 2021
- Цикл: Библиотека программиста
Читать книгу "JavaScript с нуля"
Клонирование элементов
По мере продвижения эта глава становится все запутаннее, но, к счастью, мы уже дошли до последнего раздела. Оставшаяся техника управления DOM, о которой стоит знать, связана с клонированием элементов, а именно с созданием их идентичных копий:
Клонирование производится с помощью вызова функции cloneNode для нужного элемента с аргументом true или false — это определяет, хотим мы клонировать только сам элемент или еще и всех его потомков. Вот как будет выглядеть код для клонирования элемента (и добавления его в DOM):
let bodyElement = document.querySelector("body");
let item = document.querySelector("h1");
let clonedItem = item.cloneNode(false);
// добавление клонированного элемента в DOM
bodyElement.appendChild(clonedItem);
Как только клонированные элементы будут добавлены в DOM, можно применить уже изученные нами техники. Клонирование элементов является весьма важной функцией, поэтому давайте перейдем от рассмотрения фрагмента к более полному примеру:
<!DOCTYPE html>
<html>
<head>
<title>Cloning Elements</title>
<style>
body {
background-color: #60543A;
padding: 30px;
}
h1 {
color: #F2D492;
font-size: 72px;
font-family: sans-serif;
text-decoration: underline;
}
p {
color: #F2D492;
font-family: sans-serif;
font-size: 36px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Am I real?</h1>
<p class="message">I exist entirely in your imagination.</p>
<script>
let bodyElement = document.querySelector("body");
let textElement = document.querySelector(".message");
setInterval(sayWhat, 1000);
function sayWhat() {
let clonedText = textElement.cloneNode(true);
bodyElement.appendChild(clonedText);
}
</script>
</body>
</html>
Если вы поместите весь этот код в HTML-документ и просмотрите его в браузере, то увидите нечто напоминающее недавний пример:
Но спустя пару секунд вы заметите, что этот пример несколько отличается — тем, что его сообщение продолжает повторяться:
Секрет происходящего кроется в самом коде. Давайте вернемся назад, взглянем на код внутри тега 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 повторяется и продолжает добавлять клонированный элемент на страницу.
Вы могли заметить, что мы клонируем следующий элемент абзаца:
<p class="message">I exist entirely in your imagination.</p>
В коде же мы указали следующее:
let clonedText = textElement.cloneNode(true);
Мы вызываем cloneNode с флагом true, обозначая, что хотим клонировать и всех потомков. Зачем? Ведь у нашего элемента абзаца, кажется, нет потомков. Что ж, именно здесь и проявляется различие между elements и nodes. Тег абзаца не имеет дочерних elements, но текст, обернутый тегом p, является дочерним node. Этот нюанс важно учитывать, когда вы клонируете что-либо и в итоге получаете не то, что хотели, указав, что потомков клонировать не нужно.
КОРОТКО О ГЛАВНОМ
Подытожим: DOM можно не только использовать, но и всячески изменять. Мы уже мимоходом обсуждали, как все в DOM может быть изменено, но именно здесь впервые увидели глубину и ширину доступных изменений, которые можно производить с помощью таких методов, как createElement, removeElement, remove и cloneNode.
Изучив весь этот материал, вы сможете начать с абсолютно чистой страницы и с помощью всего нескольких строк JavaScript-кода заполнить ее всем необходимым:
<!DOCTYPE html>
<html>
<head>
<title>Look what I did, ma!</title>
</head>
<body>
<script>
let bodyElement = document.querySelector("body");
let h1Element = document.createElement("h1");
h1Element.textContent = "Do they speak English
in 'What'?";
bodyElement.appendChild(h1Element);
let pElement = document.createElement("p");
pElement.textContent = "I am adding some text here…
like a boss!";
bodyElement.appendChild(pElement);
</script>
</body>
</html>
