JavaScript с нуля
- Автор: Кирупа Чиннатамби
- Жанр: Образование
- Дата выхода: 2021
- Цикл: Библиотека программиста
Читать книгу "JavaScript с нуля"
Создание элементов
Для интерактивных сайтов и приложений динамическое создание HTML-элементов и помещение их в DOM — вполне обыденная процедура. Если вы впервые слышите о том, что такое возможно, то этот раздел точно вам понравится!
Создавать элементы можно с помощью метода createElement, который работает достаточно просто. Он вызывается через объект document, и ему передается имя HTML-тега элемента, который нужно создать. В следующем фрагменте кода создается элемент абзаца, представленный буквой p:
let myElement = document.createElement("p");
Переменная myElement содержит ссылку на только что созданный элемент.
Если мы запустим приложение, добавив эту строку, то при своем выполнении она создаст элемент p. Создание элемента — это простая часть. Усилия придется приложить, чтобы сделать его веселым и ответственным членом нашей DOM. Требуется поместить этот элемент в определенное место DOM, и пока что наш динамически созданный элемент p где-то совершенно бесцельно блуждает:
Причина в том, что DOM не знает о существовании этого элемента, и, чтобы он стал полноценной частью DOM, нужно сделать две вещи:
1. Найти элемент, который выступит в качестве его родителя.
2. Использовать appendChild и присоединить элемент к этому родителю.
Легче всего это будет понять на примере, который все объединяет. Если вы хотите проработать это самостоятельно, то создайте HTML-документ и добавьте в него следующий код HTML, CSS и JS:
<!DOCTYPE html>
<html>
<head>
<title>Creating Elements</title>
<style>
body {
background-color: #0E454C;
padding: 30px;
}
h1 {
color: #14FFF7;
font-size: 72px;
font-family: sans-serif;
text-decoration: underline;
}
p {
color: #14FFF7;
font-family: sans-serif;
font-size: 36px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Am I real?</h1>
<script>
let newElement = document.createElement("p");
let bodyElement = document.querySelector("body");
newElement.textContent = "Or do I exist entirely in your
imagination?";
bodyElement.appendChild(newElement);
</script>
</body>
</html>
Сохраните файл и просмотрите его в браузере. Если все сработало, то вы увидите что-то похожее на следующий скриншот:
Отступим на шаг назад и разберем этот пример подробней. Все, что нам нужно для создания элемента и его добавления в DOM, находится между тегами script:
let newElement = document.createElement("p");
let bodyElement = document.querySelector("body");
newElement.textContent = "Or do I exist entirely in your
imagination?";
bodyElement.appendChild(newElement);
newElement хранит ссылку на наш созданный тег p. В bodyElement хранится ссылка на элемент body. В только что созданном элементе (newElement) мы устанавливаем свойство textContent, указав, что в итоге нужно отобразить.
В конце мы берем бесцельно блуждающий newElement и присоединяем его к элементу-родителю body с помощью функции appendChild.
На рис. 29.1 показано, как выглядит DOM для нашего простого примера.
Рис. 29.1. Как выглядит DOM после выполнения приведенного кода
Следует учитывать, что функция appendChild всегда добавляет элемент после всех потомков, которые могут быть у родителя. В нашем случае элемент body уже имеет в качестве потомков элементы h1 и script. Элемент p присоединяется после них как самый новый. В итоге появлятся контроль над позицией, в которой будет размещен конкретный элемент под родителем.
Если мы хотим вставить newElement сразу после тега h1, то можем сделать это, вызвав функцию insertBefore для родителя. Функция insertBefore получает два аргумента. Первый из них является элементом-вставкой, а второй — ссылкой на брата (то есть другого потомка родителя), которому этот элемент должен предшествовать. Далее приведен измененный пример, где наш newElement помещен после элемента h1 (и перед элементом script):
let newElement = document.createElement("p");
let bodyElement = document.querySelector("body");
let scriptElement = document.querySelector("script");
newElement.textContent = "I exist entirely in your imagination.";
bodyElement.insertBefore(newElement, scriptElement);
Обратите внимание, что мы вызываем insertBefore для bodyElement и указываем, что newElement должен быть вставлен перед элементом script. Наша DOM в этом случае будет выглядеть так, как показано рис. 29.2.
Рис. 29.2. Вставленный элемент находится между элементами h1 и script
Вы можете подумать, что если есть метод insertBefore, то должен быть и метод insertAfter. Но на самом деле это не так. Здесь нет встроенного способа для вставки элемента после, а не до другого элемента. Мы можем только перехитрить функцию insertBefore, сказав ей вставить элемент
let newElement = document.createElement("p");
let bodyElement = document.querySelector("body");
let h1Element = document.querySelector("h1");
newElement.textContent = "I exist entirely in your imagination.";
bodyElement.insertBefore(newElement, h1Element.nextSibling);
Обратите внимание на выделенные строки, а затем взгляните на рис. 29.3, где видно положение до и после выполнения кода.
Рис. 29.3. Трюк для имитирования действия insertAfter
Вызов hiElement.nextSibling находит элемент script. Вставка newElement перед элементом script удовлетворяет нашу цель вставить элемент после h1. А что, если нет элемента-брата, на который можно указать? В таком случае функция insertBefore достаточно умна и просто автоматически вставляет элемент в конец.
УДОБНАЯ ФУНКЦИЯ
Если по какой-то причине вам нужно все время вставлять элементы после другого потомка, то можете использовать эту функцию, чтобы немного упростить себе жизнь:
function insertAfter(target, newElement) {
target.parentNode.insertBefore(newElement,
target.nextSibling);
}
Да, я понимаю, что это окольный путь, но он работает, и весьма прилично. Вот пример этой функции в действии:
let newElement = document.createElement("p");
let bodyElement = document.querySelector("body");
let h1Element = document.querySelector("h1");
newElement.textContent = "I exist entirely in your imagination.";
function insertAfter(target, element) {
target.parentNode.insertBefore(element, target.nextSibling);
}
insertAfter(bodyElement, newElement);
Можно пойти еще дальше и расширить этой функцией HTML-элемент, чтобы предоставить ее функциональность для всех HTML-элементов. В главе 19 «Расширение встроенных объектов» рассматривается, как сделать нечто подобное. Имейте в виду, что некоторые разработчики не одобряют расширение DOM, поэтому заготовьте какие-нибудь остроумные отговорки на случай, если эти некоторые начнут вам досаждать.
Более обобщенный подход к добавлению потомков родителю основан на понимании, что элементы-родители рассматривают потомков как точки входа в массив. Чтобы обратиться к этому массиву потомков, у нас есть свойства children и childNodes. Свойство children возвращает только HTML-элементы, а childNodes возвращает более обобщенные узлы, представляющие много того, до чего нам нет дела. Да, я осознаю, что повторяюсь, и вы можете пересмотреть главу 28 «Перемещение по DOM», чтобы лучше разобраться в способах точного указания на элемент.
