Понимание объектной модели документа (DOM) в деталях

Мы все слышали о DOM, или же Объектная модель документа, время от времени упоминается, что связано с JavaScript. DOM является довольно важной концепцией в веб-разработке. Без этого мы бы не смогли динамически изменять HTML-страницы в браузере.

Изучение и понимание DOM приводит к лучшим способам доступ, изменение и мониторинг различные элементы HTML-страницы. Объектная модель документа также может помочь нам уменьшить ненужное увеличение времени выполнения скрипта.

Деревья структуры данных

Прежде чем говорить о том, что такое DOM, как он возникает, как он существует и что происходит внутри него, я хочу, чтобы вы узнали о деревьях. Не хвойный и лиственный вид, а о дерево структуры данных.

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

Конечно, это еще не все, что касается структуры данных, но именно здесь все и начинается. это “расположение” в основе всего этого. Это очень важно и в DOM. Но мы пока не говорим о DOM, поэтому позвольте мне направить вас к структура данных, с которой вы можете быть знакомы: массивы.

Массивы и деревья

Массивы имеют индексы а также длина, они могут быть многомерный, и имеют много других характеристик. Насколько важно знать эти вещи о массивах, давайте не будем сейчас этим заниматься. Для нас массив довольно прост. Это когда ты расположить разные вещи в ряд.

Точно так же, когда мы думаем о деревьях, скажем, это о положить вещи друг под другом, начиная только с одной вещи сверху.

Теперь вы можете взять уток одной линии из ранее, включи это, и скажи мне, что “теперь каждая утка находится под другой уткой”. Это дерево тогда? это.

В зависимости от того, каковы ваши данные или как вы будете их использовать, самые верхние данные в вашем дереве (называемые корень) может быть что-то большое значение или что-то, что только там заключить другие элементы под ним.

В любом случае, самый верхний элемент в древовидной структуре данных делает что-то очень важное. Это обеспечивает место для начать поиск любой информации, которую мы хотим извлечь из дерева.

Значение DOM

DOM обозначает Объектная модель документа. Документ указывает на документ HTML (XML) который представленный как объект. (В JavaScript все может быть представлено только как объект!)

Модель созданный браузером это берет документ HTML и создает объект, который представляет его. Мы можем получить доступ к этому объекту с помощью JavaScript. И так как мы используем этот объект для манипулирования HTML-документом и создания наших собственных приложений, DOM в основном API.

Дерево DOM

В коде JavaScript документ HTML представлен как объект. Все данные, прочитанные из этого документа также сохраняется как объекты, вложенные друг в друга (потому что, как я уже говорил, в JavaScript все может быть представлено только как объекты).

Итак, это в основном физическое расположение данных DOM в коде: все расположены как объекты. Логично, однако, это дерево.

DOM Parser

В каждом браузере есть программа под названием DOM Parser который несет ответственность за парсинг HTML-документа в DOM.

Браузеры читают HTML-страницу и превращают ее данные в объекты, составляющие DOM. Информация, представленная в этих JavaScript-объектах DOM, логически организована как дерево структуры данных, известное как дерево DOM..

Разбор данных из HTML в дерево DOM

Возьмите простой HTML-файл. Имеет корневой элемент . это подэлементы являются а также , у каждого есть много собственных дочерних элементов.

Так по сути, браузер читает данные в HTML-документе, что-то похожее на это:

А также, организует их в дерево DOM как это:

Представление каждого элемента HTML (и принадлежащего ему содержимого) в дереве DOM называется Узел. корневой узел это узел .

Интерфейс DOM в JavaScript называется документ (так как это представление документа HTML). Таким образом, мы получаем доступ к дереву DOM HTML-документа сквозь документ интерфейс в JavaScript.

Мы не можем только получить доступ, но и манипулировать HTML-документом через DOM. Мы можем добавлять элементы на веб-страницу, удалять и обновлять их. Каждый раз, когда мы меняем или обновляем какие-либо узлы в дереве DOM, он отражается на веб-странице.

Как устроены узлы

Я уже упоминал, что каждый фрагмент данных из документа HTML сохранен как объект в JavaScript. Итак, как данные, сохраненные как объект, могут быть логически упорядочены как дерево?

Узлы дерева DOM имеют определенные характеристики или свойства. Почти каждый узел в дереве имеет родительский узел (узел прямо над ним), дочерние узлы (узлы под ним) и братья и сестры (другие узлы, принадлежащие тому же родителю). Имея это семья выше, ниже и вокруг узла - это то, что определяет его как часть дерева.

Эта семейная информация каждого узла сохраняются как свойства в объекте, представляющем этот узел. Например, дети является свойством узла, который содержит список дочерних элементов этого узла, таким образом, логически размещая его дочерние элементы под узлом.

Избегайте чрезмерной манипуляции с DOM

Как бы нам ни было полезно обновление DOM (для изменения веб-страницы), существует такая вещь, как переусердствовать.

Скажем, вы хотите обновить цвет