Что такое DOM дерево?

В этом видео мы с вами поговорим о DOM. DOM - это сокращенное название от Document Object Model.

Допустим у нас есть простая html страничка

<html>
  <head>
      <title>Test</title>
  </head>
  <body>
    <div>
      <p>Some text</p>
    </div>
  </body>
</html>

Как же работает javascript в браузере?

Браузер загружает страницу
Он берет наш html, парсит его и выводит на экран
Потом он создает DOM дерево

То есть он просматривает весь наш html и создает дерево елементов, с правильной вложенностью базируясь на html, который он отрендерил до этого. То есть все начинается с елемента document, потом в него вкладывается елемент html, куда вкладывается head и body. Дальше он вкладывает каждый елемент друг в друга в правильной последовательности.

И именно DOM позволяет нам получать доступ к елементам страницы с помощью javascript. Каждый елемент страницы является обьектом. И как мы с вами разбирали в серии "Javascript для начинающих", обьект может иметь свойста и методы. То есть мы можем работать с каждым елементом на странице читая его свойста и вызывая его методы.

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

Это причина по которой нам вообще нужен DOM.

Как я уже сказал, все DOM дерево представляет собой набор елементов. И так, как это дерево, то у каждого елемента есть родительские и дочерние елементы. Например у елемента html, родительским елементом будет елемент "document", а дочерними "head" и "body".

Итак мы знаем, что DOM дерево состоит из елементов, но это не совсем так. Оно состоит из node (по русски узлов) и они бывают нескольких типов. Один из них мы с вами уже разобрали - это елемент. То есть div, p, body - это елементы.

Второй тип - это аттрибуты. Когда у нас написан код

<div id="container">
  Text
</div>

То id="container" - это аттрибут нода. И третий тип - это текстовая нода. Любой текст, который мы напишем попадает в текстовую ноду.

Именно так описывается дерево. В примере с div, div - это елемент нода, id и текст - это 2 ноды, которые вложены внутри елемент ноды.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

#1 Что такое DOM дерево?