Я собираюсь написать об одной из основных концепций Интернета; ДОМ. Так что, если вы новичок в JavaScript или, может быть, уже работали раньше, эту статью неплохо увидеть. Мы поймем DOM, объектную модель документа. Те, кто несколько лет живет с JavaScript, знают, что DOM является самым важным навыком, который должен развивать веб-программист. Но это термин, который часто бывает трудно понять в первый раз, когда вы его слышите, потому что он довольно расплывчатый. Люди спрашивают, а что такое DOM? Это язык, часть JavaScript? Что это? Когда вы вводите в Google термин DOM, вы обнаруживаете такие фразы, как «Объектная модель документа - это интерфейс прикладного программирования, который определяет логическую структуру правильно сформированных документов XML и HTML», и это действительно не помогает большинству людей, но довольно простая идея в уме.

Итак, давайте рассмотрим модель DOM по частям. Что я имею в виду под документом? Что ж, для нас документ означает просто страницу, а не сайт, веб-страницу; веб-страница - это документ, который можно представить по-разному. Вы это уже знаете.

В конце концов, что это за веб-страница? Ну, оба. Один - это вид браузера, другой - исходный код. Это тот же документ; он может иметь другое представление. Нам также нужно понять, как JavaScript наблюдает за одним и тем же документом и в другом представлении.
Теперь мы понимаем, что является частью документа в DOM. Но что такое объектная часть объектной модели документа? Что ж, когда мы говорим об объектах в языках программирования, очень легко увязнуть в глубоком семантическом значении, но нам это не нужно.
Даты - это объекты, массивы - это объекты. Я могу создавать свои собственные объекты. Объект - это просто вещь, что-то, все, что имеет смысл рассматривать как отдельную часть, даже если она содержит другие вещи. Для нас это действительно элементы, компоненты, отдельные части этого документа. Посмотрите на тег h1, посмотрите на часть неупорядоченного списка, посмотрите на весь документ. Все это объекты.

Теперь пришла очередь модели. Вы видели блок-схемы или схемы баз данных, позволяющие сделать что-то сложное абстрактным. На веб-странице мы можем взять любой HTML-код и представить его в виде древовидной структуры следующим образом:

В простейшем виде HTML он содержит голову и тело. Сам заголовок содержит элемент заголовка, тело содержит h1 для заголовка, p для абзаца и неупорядоченный список. Неупорядоченный список содержит три элемента списка. С помощью этой диаграммы мы можем представить древовидную структуру этого HTML-документа.
Мы называем каждую из этих частей узлами. Тег абзаца, тело или h1 - все это узлы. Мы могли бы даже описать отношения, такие как предки и потомки. Итак, модель - это просто набор терминов, с которыми мы можем согласиться, набор стандартов, которые мы можем использовать. В итоге мы получаем согласованный набор терминов, которые точно описывают, как взаимодействовать с частями веб-страницы. Это длинная фраза, поэтому мы называем ее объектной моделью документа. Это не язык. Это условность. Это согласованная терминология, которая позволит нам описывать любую веб-страницу и взаимодействовать с ней. Ни одной конкретной, никому. Когда я знаю базовые концепции DOM, я могу написать JavaScript, который перемещается по любой странице. Вот почему нам нужно знать модель DOM. Это способ доступа к странице из нашего скрипта и способ, которым наша страница может войти в наш скрипт.

Первоначально опубликовано на meissam.net.