На связи! С вами рубрика IT.
Поговорим о DOM. Наверно простые HTML-верстальщики о нем даже не задумываются, а зря. Ведь это весьма мощная модель представления вашего документа.
Не будем тянуть кота за хвост, поехали...
Обычно говорят так: DOM - это Объектная Модель Документа (Document Object Model).
Но, можно сказать чуть проще:
DOM - это представление вашего HTML кода, это то как браузер "понял" Ваш HTML код читая его.
1) Вы пишите HTML код в файл ~ index.html
2) Браузер его по-строчно "читает" и тут же строит DOM, состоящий из множества узлов (node)
Вот так браузер читает ваш html файл:
А вот так он его "понимает", это и есть DOM:
Видите? DOM - это дерево, это иерархия узлов (nodes), это Дедушка->Папа->Дети.
К тому же, Nodes бывают разных типов, и у каждого типа свои особенности и способ отображения (рендера) в DOM.
Например:
Node типа "DocumentType" может рассказать нам о том, какой документ браузер прочитал: XML или HTML?
Node типа "Element" может поведать нам, что он такое и сколько у него дочерних nodes
Node типа "Comment" сообщает, что это комментарий и отображать не нужно. Ведь вот это <!-- комментарий --> мы же не видим, верно?
За счет DOM, мы можем, программно
удалять узлы (nodes) из документа
добавлять узлы (nodes) из документа
изменять узлы (nodes) из документа
Причем любое изменение в DOM, заставляет браузер делать переотрисовку (re-render) содержимого.
Одним словом: То что браузер отображает, оно будет изменяться каждый раз.
Будем "дозировать" информацию т.к тема DOM весьма обширна. Поэтому одной статьей здесь не обойтись.
Надеюсь, то что мы разобрали послужит, как минимум, стартовой точкой в понимании DOM и началу исследований!
Конец связи, увидимся в следующей серии!
#айти #программирование #разработка #code #frontend #web #technology