Путешествие по DOM - это как создание личного расписания

Если вы используете календарь для планирования своего дня, вы сможете понять основы DOM.

Вспомните, как вы впервые выучили HTML.

Кто-то (или какое-то программное обеспечение) должен был объяснить, как различные элементы работают вместе, чтобы вы могли создать свою первую веб-страницу.

Вероятно, они описали это как «коробки внутри коробок… внутри коробок…». в коробках… »

И этот базовый уровень понимания действительно очень хорошо помогает вам двигаться вперед! Но затем, как только вы освоитесь с CSS и перейдете к JavaScript ... ну, блоки внутри блоков больше не будут сокращать его.

JavaScript заставляет вас глубже понять DOM

Как только вы перейдете к JavaScript и jQuery, вам нужно будет понять объектную модель документа (DOM). DOM - это интерфейс прикладного программирования (API), который позволяет вам использовать JavaScript для внесения изменений в ваш HTML.

Это ключ к созданию динамических веб-сайтов и связыванию JavaScript и HTML во внешнем интерфейсе.

Обычно модель DOM называется деревом DOM. Такого рода работы для объяснения основной идеи, поскольку люди понимают идею ветвей деревьев и бесконечную иерархию этих ветвей.

Но аналогия все еще настолько проста, что вам будет сложно понять различные отношения между элементами в DOM.

Я хотел найти способ объяснить две ключевые концепции DOM:

Сдерживание: родительские элементы содержат дочерние элементы. И эти дети содержат свои дочерние элементы.
Порядок. Элементы DOM имеют определенный порядок, которым вы можете управлять.

Я обнаружил, что концепция личного календаря намного лучше показывает сложные отношения между элементами в DOM. Вот наглядное объяснение того, как использовать календарь для понимания DOM.

Чтобы понять это руководство, вам просто нужно понять классы и то, как настроить HTML-документ.

Основы обхода DOM

Вот краткая диаграмма первых трех месяцев 2018 года.

В этом случае год содержит три месяца, каждый из которых состоит из 4 недель.

Вот такая же концепция в HTML:

Каждый месяц - это div, у которого есть не только класс month, но также класс с конкретным name месяца. Это потому, что существует почти бесконечное количество лет, поэтому существует множество случаев каждого класса. Такая же структура используется в div с классом year в строке 1.

Кроме того, недели не имеют какого-либо конкретного идентификатора, кроме класса week. Вы поймете почему через мгновение.

Помимо использования классов и идентификаторов для доступа к элементам через DOM, мы также можем использовать отношения между элементами. На данный момент вам нужно знать три: ребенок, родитель и брат или сестра.

Дочерние элементы

Дочерний элемент: элемент, содержащийся в другом элементе.

Пример. Div january является дочерним годом 2018.

Родительские элементы

Родительский элемент: элемент, содержащий другие элементы.

Пример. 2018 - родительский год. Но январь также является родительским, потому что в нем 4 недели!

Родственные элементы

Родственный элемент: элемент, имеющий того же прямого родителя, что и другие элементы.

Пример. Все 4 недели в течение января являются братьями и сестрами друг друга.

Так в чем разница между DOM и реальным HTML, спросите вы?

Что ж, подумайте, как вы пользуетесь личным календарем. Это просто запись того, что вы делаете в течение своих дней. Это не настоящая деятельность! Другими словами, это модель того, что происходит в течение дня.

HTML - это актуальное содержание вашего дня. HTML-элементы составляют веб-страницу, а DOM - это доступный интерфейс для прямых изменений.

Вот несколько примеров, которые продемонстрируют эти концепции в действии.

Пример №1: Игра в футбол раз в неделю

Хорошо, мы собираемся показать, как вы представляете некоторые привычки реального мира в DOM. Вот сценарий: вы хотите играть в футбол один раз в неделю в январе.

В терминах HTML это означает, что нам нужно получить каждую из 4 недель января и изменить их содержание на «Играть в футбол».

Это может показаться глупым риторическим вопросом, но знаете ли вы, что общего у этих 4 div с классом week?

Ответ: все они дочерние элементы блока с классом january!

Итак, мы можем использовать следующий оператор в JavaScript, чтобы получить div с классом january:

document.getElementsByClassName('january');

Затем нам нужны все дочерние элементы этого div. Мы можем обновить предыдущий оператор с помощью свойства childNodes:

document.getElementsByClassName('january').childNodes;

Наконец, нам нужно использовать свойство nodeValue, чтобы изменить текст для каждого элемента. И нам нужно использовать цикл for для доступа к элементу с childNodes, поскольку он возвращает массив элементов. Итак, нам нужно пройтись по этому списку.

let weeks = document.getElementsByClassName('january').childNodes;
for(let i = 0; i< weeks.length; i++){
    weeks[i].nodeValue = "Play soccer";
}

Вот окончательный результат в HTML:

Здесь мы сделали две вещи:

Обошел DOM - это означает, что мы использовали серию селекторов, чтобы получить нужные нам элементы: 4 week div
Манипулировали DOM - мы фактически изменили текстовое содержимое в элементах HTML!

Пример № 2: Оплата счета по кредитной карте

Вот второй сценарий. Вам необходимо оплачивать счет по кредитной карте в течение первой недели каждого месяца (в данном случае всего три месяца).

В терминах HTML это означает, что нам нужно получить первый дочерний элемент каждого div с классом month. Затем вам нужно изменить значение на Счет оплачен.

Начнем так же, как в прошлый раз. Нам нужно получить каждый div с классом month.

document.getElementsByClassName('month');

Далее, в JavaScript действительно есть свойство firstChild. Таким образом, мы можем получить первого дочернего элемента каждого div с классом month.

document.getElementsByClassName('month').firstChild;

Вот как это выглядит:

Теперь, как и в прошлый раз, нам нужно сразу изменить значение всех этих week div на значение Bill payed.

document.getElementsByClassName('month')
.firstChild.nodeValue = "Bill payed";

Между прочим, наличие оператора JavaScript в двух строках не имеет значения, если только одна точка с запятой.

Окончательный HTML:

Посмотрите, как мы можем обновлять элементы в масштабе, основываясь только на имени класса? Довольно мощный.

Пример № 3: Уход в отпуск на неделю

Вот сценарий. Допустим, это ваш рабочий календарь, и вы хотите указать, что вторую неделю февраля вы возьмете отпуск, чтобы поехать в отпуск с семьей.

В терминах HTML это означает, что вам нужно выбрать второй дочерний элемент div февраля и изменить значение на Отпуск.

В прошлый раз мы использовали свойство firstChild из JavaScript. Но второго дочернего свойства нет! Вместо этого мы собираемся использовать свойство childNodes, как в первом примере.

childNodes возвращает массив всех дочерних элементов родительского элемента. Если вы еще не знакомы с массивами, прочтите мое руководство здесь. Хорошей новостью является то, что вы можете выбирать определенные элементы, используя фигурные скобки [ ], как и любой другой массив.

Поскольку массивы имеют индекс 0, нам нужно выбрать элемент с индексом 1, который является вторым элементом.

document.getElementsByClassName('february').childNodes[1];

И тогда нам просто нужно изменить значение.

document.getElementsByClassName('february') .childNodes[1].nodeValue= 'Vacation';

И последний HTML.

childNodes просто применяет структуру массива, которую вы, вероятно, уже знаете, к DOM, чтобы вы могли манипулировать HTML.

Призыв к действию

Вам понравилось это? Если вы хотите получать уведомления, когда я буду выпускать будущие руководства, в которых используются аналогии, зарегистрируйтесь здесь.

Путешествие по DOM - это как создание личного расписания