Копаем глубже в 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:
- Создать узлы
- Узлы доступа
- Управление узлами
Примечание: Mozilla MDN — отличный ресурс для подробного изучения, так что сделайте привычкой часто читать и использовать в качестве справочного материала.
В двух словах
Объектная модель документа:
- API
- Легко использовать
- Можно управлять с помощью языков сценариев, таких как JavaScript
Подведение итогов
Всемирная паутина была предназначена для обмена исследовательскими работами в научных целях. Теперь Интернет стал намного больше, так как люди могут делать покупки, совершать финансовые транзакции, тратить бесчисленные часы на контент и т. д. С помощью API DOM и JavaScript мы можем создавать интерфейсы и взаимодействие, которые доставляют удовольствие и смысл для пользователи. Итак, создайте эти динамичные, привлекательные веб-страницы с помощью DOM API и JavaScript. Удачи!
Ресурсы
- MDN Введение в DOM
- CSS Trick Что такое DOM?
- DOM-дерево JavaScript.Info
Примечание для читателей. Прочитали что-то совершенно вопиющее и совершенно ошибочное в этом письме? Пожалуйста, дайте мне знать, написав личные комментарии здесь, на Medium, и я щедро вознагражу вас желанными кошачьими GIF-файлами. Спасибо!