Автор оригинала: FreeCodeCamp Community Member.
Кевином Кононенко
Если вы используете календарь для планирования вашего дня, вы можете понять основы DOM.
Думайте в первый раз, когда вы узнали HTML.
Кто-то (или некоторое программное обеспечение) должен был объяснить, как разные элементы работали вместе, чтобы вы могли создать свою первую веб-страницу.
Они, вероятно, описали его как «коробки в рамках ящиков … в пределах коробки …. В рамках …»
И этот базовый уровень понимания на самом деле работает довольно хорошо, чтобы вы собираетесь идти! Но затем, как только вы будете комфортно с CSS и вставьте в JavaScript … ну, ящики в рамках больше не собираются его резать.
JavaScript заставляет вас понимать дому более глубоко
Как только вы доберетесь до JavaScript и jQuery, вам нужно понять Модель объекта документа ( Дом ). DOM – это интерфейс программирования приложений (API), который позволяет вам использовать JavaScript для внесения изменений в свой HTML.
Это ключ к созданию динамических веб-сайтов и связывание JavaScript и HTML на переднем углу.
Обычно дом называется Дом дерево. Таким образом, это работает, чтобы объяснить основную идею, так как люди понимают идею ветвей деревьев и бесконечной иерархии этих ветвей.
Но аналогия все еще так базовый Что вы будете бороться, чтобы понять различные отношения между элементами в доме.
Я хотел найти способ объяснить два ключевых концепция в доме:
- Сдерживание: Родительские элементы содержат детские элементы. И эти дети содержат свои детские элементы.
- Заказ: У элементов DOM есть определенный заказ, который вы можете манипулировать.
Я обнаружил, что концепция Личный календарь Делает гораздо лучшую работу по демонстрированию сложных отношений между элементами в доме. Вот визуальное объяснение того, как использовать календарь, чтобы понять Дом.
Чтобы понять этот учебник, вам просто нужно понимать классы и как настроить HTML-документ.
Основы пересечения дома
Вот быстрый диаграмма первых трех месяцев 2018 года.
В этом случае Год Содержит три месяцы, который каждый содержит 4 недели Отказ
Вот то же самое понятие в HTML:
Каждый месяц – Div что не только имеет класс месяц , но и класс с определенным Имя месяца. Это потому, что есть почти бесконечное количество лет, поэтому существует много случаев каждого класса. Эта же структура используется на Div с классом Год на линии 1.
Кроме того, недели не имеют определенного идентификатора за пределами неделя учебный класс. Вы увидите, почему через мгновение.
Помимо использования классов и идентификаторов для доступа к элементам через DOM, мы также можем Используйте отношения между элементами Отказ Есть три, которые вам нужно знать сейчас – ребенок, родитель и брат.
Детские элементы
Детский элемент: Элемент, который содержится в другом элементе
Пример – Январь Div это ребенок года 2018 Отказ
Родительские элементы
Родительский элемент: Элемент, который содержит другие элементы.
Пример: год 2018 является родителем. Но Январь также родитель, потому что он содержит 4 недели !
Элементы брата
Сияющий элемент: элемент, который имеет тот же прямой родитель как другие элементы.
Пример: все 4 недели внутри Январь братья и сестры друг друга.
Так вчем разница между домом и фактическим HTML, вы можете спросить?
Ну, подумайте, как вы используете личный календарь. Это просто запись вещей, которые вы делаете в течение дня. Это не фактическая деятельность! Другими словами, это модель того, что происходит в течение дня.
HTML является фактическим содержанием вашего дня. Элементы HTML составляют веб-страницу, в то время как DOM является доступным интерфейсом для прямых изменений.
Вот несколько примеров, которые покажут эти концепции в действии.
Пример № 1: играть в футбол раз в неделю
Хорошо, мы собираемся показать, как вы будете представлять некоторые реальные привычки в доме. Вот сценарий: вы хотите играть в футбол раз в неделю за январь месяц.
В HTML-терминах, это означает, что нам нужно получить каждую из 4 недель в январе и изменить их контент: «Играть в футбол».
Это может звучать как глупо, риторический вопрос, но вы знаете, что те 4 Divs с классом неделя общими?
Ответ: Все они дети дерьма с классом Январь !
Итак, мы можем использовать следующее утверждение в JavaScript, чтобы получить div с классом Январь :
document.getElementsByClassName('january');Тогда нам нужны все дети этого DIV. Мы можем обновить предыдущее утверждение с Детские детски свойство:
document.getElementsByClassName('january').childNodes;Наконец, нам нужно использовать Nodevalue Свойство для изменения текста для каждого элемента. И нам нужно использовать цикл для доступа к элементу, с помощью детей, поскольку возвращает массив элементов. Поэтому нам нужно повторить этот список.
let weeks = document.getElementsByClassName('january').childNodes;for(let i = 0; i< weeks.length; i++){ weeks[i].nodeValue = "Play soccer";}Вот окончательный результат в HTML:
Мы сделали здесь две вещи:
- Пересекал DOM – Это означает, что мы использовали серию селекторов, чтобы получить элементы, которые нам нужны: 4
неделяведущий - Манипулированный Дом – Мы на самом деле изменили текстовый контент в элементах HTML!
Пример № 2: Оплата законопроекта с кредитной картой
Вот второй сценарий: вам нужно сделать оплату счета на кредитную карту в течение первой недели каждого месяца (в этом случае есть три месяца).
В HTML-терминах это означает, что нам нужно получить Первый ребенок Элемент каждого Div с классом месяц Отказ Затем вам нужно изменить значение для Законопроект оплачивается Отказ
Давайте начнем так же, как в прошлый раз. Нам нужно схватить каждый div с классом месяц Отказ
document.getElementsByClassName('month');Далее JavaScript на самом деле имеет Перцборда свойство. Таким образом, мы можем схватить первого ребенка каждого Div с классом месяц Отказ
document.getElementsByClassName('month').firstChild;Вот что это выглядит:
Теперь, как в последний раз, нам нужно изменить значение всех тех неделя Divs сразу на ценность Законопроект оплачивается Отказ
document.getElementsByClassName('month').firstChild.nodeValue = "Bill payed";Наличие оператора JavaScript на двух строках, кстати, до тех пор, пока есть только один запястья.
Final HTML:
Посмотрите, как мы можем обновить элементы в масштабе, основанные просто на имя класса? Довольно мощный.
Пример № 3: собирается в отпуск на неделю
Вот сценарий. Допустим, это ваш рабочий календарь, и вы хотите указать, что вы будете брать вторую неделю февраля, чтобы отправиться в отпуск с вашей семьей.
В HTML-терминах, это означает, что вам нужно выбрать Второй ребенок Февраль div и измените значение для Отдых Отказ
В прошлый раз мы использовали Перцборда Недвижимость от JavaScript. Но нет второй детской собственности! Вместо этого мы собираемся использовать Детские детски Собственность, как в первом примере.
Детские детски Возвращает массив всех детей родительского элемента. Если вы еще не знакомы с массивами, Проверьте мой путеводитель здесь Отказ Хорошая новость заключается в том, что вы можете выбрать определенные элементы, использующие брекеты [] , как и любой другой массив.
Поскольку массивы 0 – индексированы, нам нужно выбрать элемент с индексом 1, который является вторым элементом.
document.getElementsByClassName('february').childNodes[1];И тогда нам просто нужно изменить значение.
document.getElementsByClassName('february') .childNodes[1].nodeValue= 'Vacation';И последний HTML.
Детские детски Просто применяет структуру массива, которую вы, вероятно, уже знаете, на DOM, чтобы вы могли манипулировать HTML.
Призыв к действию
Вам понравилось это? Если вы хотите получить уведомление, когда вы отпускаете будущие учебные пособия, которые используют аналогии, регистрация здесь Отказ