Копаем глубже в DOM с помощью JavaScript для начинающих

Написание кода помимо простых функций JavaScript

DOM: следующий шаг после JavaScript 101

Поздравляем авантюриста! Вы находитесь на этапе своего пути к JavaScript, когда вы можете повторять программы с помощью циклов, вызывать пользовательские функции и даже создавать объекты с уникальными свойствами с помощью прототипов, и все это благодаря таким ресурсам, как CodeSchool, TreeHouse, FreeCodeCamp и т. д. Вы понимаете основы JavaScript, и вы готовы к следующему большому приключению на пути к JavaScript. Итак, какое следующее большое приключение?

Добро пожаловать в страну DOM.

DOM — это аббревиатура от Объектная модель документа, представляющая собой программный интерфейс для HTML и XML. «Документ» в DOM относится к первоначальной цели создания всемирной паутины. Всемирная сеть Интернет была создана как центр обмена научными статьями или документами.

DOM — это не язык программирования, а скорее представление веб-страницы. В частности, это внутреннее программное представление веб-страницы в браузере. DOM также не зависит от языка, поэтому им можно манипулировать такими языками, как JS, изменяя страницу без изменения HTML. Другими словами, вы можете создавать документы, перемещаться по их структуре и добавлять, изменять или удалять элементы и содержимое с помощью любого языка сценариев.

При любом взаимодействии с пользователем, скажем, при нажатии кнопки, клиент отправляет запрос на веб-сервер, а последний отвечает файлами HTML и сценариями, которые клиент загружает на страницу. Браузер клиента загружает не файл HTML, а DOM. И если углубиться еще глубже, DOM — это объект документа. Да, тот же самый объект, который вы изучали, изучая основы JavaScript! Как и любые другие объекты JavaScript, объект документа можно изменить с помощью языка сценариев, такого как JavaScript.

Примечание:CSS Tricks имеет раздел, объясняющий HTML и DOM в этой замечательной статье, поэтому я настоятельно рекомендую прочитать его для лучшего понимания.

В качестве быстрого примера введите document.body в консоли браузера на этой странице браузера, и вы увидите значение свойства body в объекте документа.

Теперь введите document.body.remove();

И все содержимое вашей страницы исчезло! По сути, вы удалили элемент body и все его содержимое. Вы внесли изменения в DOM, но не повлияли на фактический HTML, как вы можете видеть, когда обновляете страницу. Содержимое тела снова здесь.

DOM-дерево

Итак, это хороший переход к дереву DOM. Дерево — это визуальное представление объекта документа и его дочерних элементов.

Каждый из этих прямоугольников является объектами, и они считаются «узлами» в DOM. Думайте об узлах как о точках соединения на линии. Из объекта Document у вас есть корневой элемент html. Элемент html имеет два дочерних элемента, head и body. Под ними у каждого есть свои собственные дочерние элементы. Кстати, у объекта Document есть родительское окно, а также братья и сестры, Location и History. Но это можно объяснить в другой раз в отдельном посте.

В DOM все состоит из узлов. Эти узлы представляют собой объекты, которые затем превращаются в деревья. Как и другие объекты, узлы могут иметь свойства и методы. Существуют различные типы узлов:

  • Документ[9]
  • Тип документа[10]
  • Элемент[1]
  • Текст[3]
  • Комментарии[8]
  • Фрагменты документа[11]

Взаимодействие DOM и JavaScript

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

Доступ к DOM

Чтобы просто получить доступ к DOM, вы можете использовать этот метод:

document.getElementById(id);

Давайте попробуем это с консолью. Введите следующий код: document.getElementById('container');

и вы увидите:

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

Другое часто используемое свойство: document.getElementsByClassname(names);

При этом извлекается значение, имя класса которого точно совпадает с именем, переданным в качестве параметра.

Управление DOM в теории

Чтобы начать работу с DOM API, вам нужно знать 3 ключевых понятия, чтобы эффективно манипулировать DOM:

  1. Создать узлы
  2. Узлы доступа
  3. Управление узлами

Примечание: Mozilla MDN — отличный ресурс для подробного изучения, так что сделайте привычкой часто читать и использовать в качестве справочного материала.

В двух словах

Объектная модель документа:

  • API
  • Легко использовать
  • Можно управлять с помощью языков сценариев, таких как JavaScript

Подведение итогов

Всемирная паутина была предназначена для обмена исследовательскими работами в научных целях. Теперь Интернет стал намного больше, так как люди могут делать покупки, совершать финансовые транзакции, тратить бесчисленные часы на контент и т. д. С помощью API DOM и JavaScript мы можем создавать интерфейсы и взаимодействие, которые доставляют удовольствие и смысл для пользователи. Итак, создайте эти динамичные, привлекательные веб-страницы с помощью DOM API и JavaScript. Удачи!

Ресурсы

  1. MDN Введение в DOM
  2. CSS Trick Что такое DOM?
  3. DOM-дерево JavaScript.Info

Примечание для читателей. Прочитали что-то совершенно вопиющее и совершенно ошибочное в этом письме? Пожалуйста, дайте мне знать, написав личные комментарии здесь, на Medium, и я щедро вознагражу вас желанными кошачьими GIF-файлами. Спасибо!