HTML DOM в основном получает доступ к элементам HTML и изменяет их с помощью JavaScript.
ДокументОобъект Модель
В тот момент, когда вы открываете веб-страницу в своем браузере, браузер извлекает HTML-текст страницы и анализирует его. Браузер строит модель структуры документа и использует эту модель для отображения страницы на экране. Браузер строит модель структуры документа и использует эту модель для отображения страницы на экране. Это представление документа в основном является типом структуры данных, которую вы можете прочитать или изменить — живая структура данных, когда она изменяется, страница на экране обновляется, чтобы отразить изменения.
Структура
DOM организован как дерево, в котором элементы расположены иерархически в соответствии со структурой документа. Объекты, представляющие элементы, имеют такие свойства, как parentNode и childNodes, которые можно использовать для навигации по этому дереву.
Такие теги, как <body> и </body>, заключают в себе другие теги, которые, в свою очередь, содержат другие теги или текст. Вот пример документа.
Для каждого поля есть объект, с которым мы можем взаимодействовать, чтобы узнать, например, какой HTML-тег он представляет и какие данные он содержит. Это представление называется объектом модели документа или сокращенно DOM.
Глобальная привязка document дает нам доступ к этим объектам. Его свойство documentElement ссылается на объект, представляющий тег ‹html›. Поскольку каждый HTML-документ имеет заголовок и тело, он также имеет свойства head и body, указывающие на эти элементы.
Эти функции аналогичны структуре дерева: у каждого узла есть дочерние узлы, которые могут иметь собственные дочерние узлы. Дерево документа также можно визуализировать следующим образом:
Здесь показаны родительские и дочерние узлы со стрелками, указывающими отношения родитель-потомок между узлами.
Для доступа к значениям узла существует несколько функций — элементы HTML DOM. Некоторые из наиболее часто используемых методов HTML DOM: querySelector(), innerHTML, getElementById(), innerText, value, getElementByTagName().
Таким образом, HTML DOM — это стандарт получения, изменения, добавления или удаления элементов HTML.
