Складываем все воедино
Теперь, когда вы разобрались во всех важных свойствах, имеющихся для перемещения по DOM, давайте рассмотрим листинги, которые свяжут все диаграммы и слова в несколько приятных строк JavaScript.
Проверка наличия потомка
Чтобы проверить, есть ли у элемента потомок, мы можем сделать следующее:
let bodyElement = document.querySelector("body");
if (bodyElement.firstChild) {
// Делает что-нибудь интересное
}
Эта инструкция if вернет null, если потомков не существует. Мы могли бы также использовать bodyElement.lastChild или bodyElement.children.count, если бы любили много печатать, но я предпочитаю простые варианты.
Обращение ко всем потомкам
Если нужно обратиться ко всем потомкам родителя, всегда можно прибегнуть к старому доброму циклу for:
let bodyElement = document.body;
for (let i = 0; i < bodyElement.children.length; i++) {
let childElement = bodyElement.children[i];
document.writeln(childElement.tagName);
}
Обратите внимание, что мы используем свойства children и length так же, как делали бы это в случае с Array. Стоит отметить, что эта коллекция по сути не является Array. Практически все методы Array, которые мы можем захотеть использовать, не будут доступны для этой коллекции, возвращенной свойством children.
Прогулка по DOM
Последний фрагмент затрагивает все, что мы видели до сих пор. Он рекурсивно проходится по DOM и касается каждого HTML-элемента, который находит:
function theDOMElementWalker(node) {
if (node.nodeType == Node.ELEMENT_NODE) {
console.log(node.tagName);
node = node.firstChild;
while (node) {
theDOMElementWalker(node);
node = node.nextSibling;
}
}
}
Чтобы увидеть эту функцию в деле, мы просто вызываем ее, передавая узел, с которого хотим начать путь:
let texasRanger = document.querySelector("#texas");
theDOMElementWalker(texasRanger);
В этом примере мы вызываем функцию theDOMElementWalker для элемента, на который ссылается переменная texasRanger. Если вы хотите выполнить некий код для элемента, найденного этим скриптом, замените закомментированную строку на то, что хотите сделать.
КОРОТКО О ГЛАВНОМ
Нахождения пути внутри DOM — это один из тех навыков, которым должен обладать каждый JavaScript-разработчик. Этот урок предоставляет обзор доступных техник. Применение же всего этого материала на практике уже полностью ложится на вас… или хорошего друга, который поможет со всем этим разобраться. В последующих уроках мы углубимся в эту тему еще больше. Разве это не звучит захватывающе?
Появился вопрос? Обращайтесь на https://forum.kirupa.com за ответом от дружественных разработчиков, таких же, как мы с вами.
Глава 29. Создание и удаление элементов DOM
Здесь реально может заштормить. Поэтому держитесь крепче во время чтения следующих разделов:
Независимо от того, какое представление сформировалось у вас на основе предыдущих обсуждений DOM, наша DOM не обязана состоять только из HTML-элементов, существующих в разметке. Есть возможность создавать HTML-элементы прямо из воздуха и добавлять их в DOM, используя всего несколько строк JavaScript. Также есть возможность перемещать элементы, удалять их и проделывать с ними многие другие богоподобные действия. Сделайте паузу, осмыслите прочитанное, дайте ему осесть в своем сознании.
Помимо изначальной крутизны всего этого возможность динамического создания и изменения элементов в DOM является важной деталью, благодаря которой работают многие из наших любимых сайтов и приложений. Если об этом как следует подумать, то все встает на свои места. Если в нашем HTML все будет предопределено, то это сильно ограничит его возможности. Нам же нужно, чтобы содержимое изменялось и адаптировалось при поступлении новых данных, при взаимодействии со страницей, при прокручивании или при выполнении множества других действий.
В этой главе мы познакомимся с основами того, что позволяет всему этому работать. Мы рассмотрим создание элементов, удаление элементов, их переподчинение и клонирование. И эта глава будет последней, где изучаются особенности DOM. Так что можете звать друзей и надувать шары к празднику!