DOM (объектная модель домена) – это абстрактное представление HTML-документа, созданного вашим браузером. Когда вы загружаете HTML-страницу, ваш браузер фактически создает веб-сайт, читая DOM, а не ваш HTML-документ. . DOM эффективно создает API для HTML, предоставляя разработчику функции и свойства для каждой части страницы. Именно это позволяет разработчикам манипулировать веб-страницами после их загрузки и динамически отображать эти изменения.

Я провожу большую часть исследований для этого поста через Mozilla Developer Network, поэтому не стесняйтесь следить за ними.

DOM организован в виде дерева узлов, называемого деревом DOM. Каждый узел в дереве DOM — это объект Javascript (сюрприз), который наследует свойства и методы от соответствующего прототипа интерфейса DOM. Каждый элемент HTML, определенный в вашем элементе HTML, имеет соответствующий интерфейс DOM, который он унаследует при создании в дереве DOM. Текст, атрибуты и комментарии также имеют соответствующие интерфейсы, определяющие их функциональность в DOM.

Если вы хотите понять, что происходит за кулисами, просто зайдите в свой браузер и откройте инструменты разработчика Chrome. напишите документ в консоли, а затем нажмите «.». Вы увидите множество всплывающих опций автозаполнения. Это прототипы функций узла документа, в котором хранятся все остальные узлы DOM.

Корневой узел вашего документа называется document и содержит все остальные узлы. К объекту документа прикреплено множество уникальных методов, таких как baseURI (который возвращает URI страницы, на которой был загружен документ) и encoding (который возвращает кодировку документа, IE. utf-8 или Ascii).

Ценная функция, предоставленная нам в документе, называется getElementById(…), с помощью которой мы можем передать идентификатор и получить возвращенный узел. Если вы попросите браузер вернуть узел конкретно document.getElementById(‘main-header’), возвращенный объект будет узлом, соответствующим этому атрибуту id. Чтобы понять вещи немного глубже, мы можем запустить функцию на этом узле с именем nodeType, которая возвращает тип узла верхнего уровня. Он вернет число от одного до 9, соответствующее следующей таблице:

Имя — Значение
ЭЛЕМЕНТУЗЕЛ — 1
АТРИБУТУЗЕЛ — 2
ТЕКСТУЗЕЛ — 3
CDATA_SECTION_NODE — 4
ENTITY_REFERENCE_NODE — 5
УЗЕЛ_СУЩНОСТИ — 6
УЗЕЛ_ИНСТРУКЦИИ_ОБРАБОТКИ — 7
УЗЕЛ КОММЕНТАРИЙ — 8 УЗЕЛ
ДОКУМЕНТА — 9
УЗЕЛ_ТИПА_ДОКУМЕНТА — 10
DOCUMENT_FRAGMENT_NODE — 11
NOTATION_NODE — 12

Наиболее распространенными узлами, которые вы получите обратно, являются элементы, атрибуты и текстовые узлы.

Узлы элемента создаются любым элементом HTML:

<p class="header">Title</p>

Когда вы попросите свою консоль вернуть узел элемента, инструменты разработчика Chrome смилостивятся и вместо того, чтобы вернуть вам массивный объект javascript, содержащий все свойства этого узла элемента, он вернет представление элемента, которое выглядит так же, как исходный элемент. Узел элемента — это нечто большее, потому что он наследуется от прототипа элемента. Прототип Element добавляет массу методов к вашему узлу DOM. Вы можете увидеть свойства этого объекта — innerHTML вернет строку, состоящую из html-содержимого этого узла, а атрибуты вернут карту узлов атрибутов, связанных с этим узлом.

Помимо общих методов и свойств вашего узла элемента, вы также будете иметь доступ ко всем методам и свойствам для типа узла элемента, который вы выбираете (ссылка, абзац или элемент ввода имеют очень специфические методы). Ссылка, например, определяется интерфейсом HTMLLinkeElement DOM. Это означает, что к нему прикреплены специальные свойства, такие как .href и .rel. См. полную документацию здесь.

Узлы атрибутов содержат информацию о конкретном атрибуте для определенного элемента. Они связаны с создавшим их элементом, но также содержат информацию о других элементах с такими же атрибутами. Класс и идентификатор являются наиболее распространенными атрибутами. У них есть такие методы, как .item(…), который возвращает узел с указанным индексом в nodeMap, и name, который возвращает это имя атрибута.

Текстовые узлы содержат текстовую информацию и прикреплены к своему родительскому элементу. У них есть такие методы, как replaceWholeText(…), которые заменят весь текст этого узла.

В DOM гораздо больше глубины, но, надеюсь, эта предыстория даст вам немного контекста того, что происходит, когда вы взаимодействуете с веб-страницей через функции javascript и jquery. Для получения дополнительной информации см. MDN.

Удачного кодирования!

Первоначально опубликовано на сайте blog.alexzitowolf.com 1 сентября 2015 г.