DOM является важной частью веб-разработки и общего удовольствия от работы в Интернете. Без DOM разработчики не смогли бы вносить динамические изменения в веб-страницы, а ваш браузер не знал бы, что делать с HTML-документом. Можете ли вы представить мир без ваших любимых социальных сетей и потоковых сервисов? Скука на всю вечность — вот как выглядел бы этот мир. Поскольку DOM так важен, почему бы не уделить время тому, чтобы узнать, что это такое?
Объектная модель документа, или DOM, представляет собой интерфейс прикладного программирования или API для документов HTML и XML. Теперь все это означает, что DOM предоставляет стандартный способ для языков программирования, таких как javascript, для взаимодействия и внесения изменений в веб-страницу, которая представляет собой гипертекстовый документ, обычно написанный на HTML. В DOM веб-страница HTML моделируется как объект в древовидной структуре. Если вы не знакомы с древовидными структурами данных, вы можете думать о них как о перевернутых деревьях с одним корнем наверху и листьями или узлами внизу. Это не более чем способ представления данных. Однако в случае DOM представляются не просто данные, а скорее объекты, описывающие логическую структуру и поведение HTML-документов, а также функции, которые можно использовать для управления ими. Эти документы состоят из элементов HTML, которые являются строительными блоками, из которых состоит веб-страница.
Так как же на самом деле выглядит DOM?
Рис. 1 показан пример веб-страницы, написанной на HTML, а на рис. 2 показано, как будет выглядеть DOM этой веб-страницы. DOM имеет то, что называется интерфейсом документа, который используется браузером для представления всего HTML-документа. Интерфейс — это просто структура программирования, которая реализует набор свойств, которыми должны обладать объекты. Это похоже на набор правил, которым нужно следовать, если вы хотите что-то создать, и в этом случае браузер строит модель веб-страницы. Этот интерфейс документа также является корнем древовидной модели веб-страницы и обеспечивает доступ ко всем данным документа, указывая на корневой узел HTML-документа. Так что же такое древовидная диаграмма на рис. 2 на самом деле показано, на что указывает корневой узел документа, то есть на объектное представление веб-страницы, написанное в HTML. На рис. 2, корень html имеет дочерние узлы, называемые body и head, которые представляют собой объекты, представляющие элементы html и функции для управления ими. Последние узлы, у которых нет дочерних узлов, или любые узлы ниже него, называются листовыми узлами, и в этом случае конечные узлы представляют собой синие тексты, показанные на рис. 1, и заголовок узла. веб-страница «Образец DOM».
Чтобы изменить заголовок с «Простая страница» на что-то другое на этом образце веб-страницы DOM, программе потребуется настроить таргетинг на элемент h1, показанный фиолетовым узлом DOM на рис. 2, и изменить его текст с помощью функций, предоставляемых DOM.
Резюме
Итак, мы узнали, что DOM — это программный интерфейс, а браузер — это тот, кто строит модель HTML-документа, используя интерфейс документа DOM. DOM предоставляет языкам программирования возможность манипулировать элементами HTML и управлять ими, чтобы создавать веб-страницы, содержимое которых может изменяться. Потрясающий! Теперь вы можете задаться вопросом, как изменение модели веб-страницы на самом деле меняет реальную веб-страницу, которую мы видим, когда выходим в Интернет? Итак, «Как на самом деле работает DOM?» это другая тема для другого дня.
Если вы хотите узнать больше, взгляните на эти сайты:
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
