Що таке dom дерево
Припустимо у нас є проста html сторінка
- Браузер завантажує сторінку
- Він бере наш html, парсит його і виводить на екран
- Потім він створює DOM дерево
Тобто він переглядає весь наш html і створює дерево елементів, з правильною вкладеністю базуючись на html, який він отрендеріть до цього. Тобто все починається з елемента document, потім в нього вкладається елемент html, куди вкладається head і body. Далі він вкладає кожен елемент один в одного в правильній послідовності.
Також потрібно чітко розділяти, що у нас є два документи. Один - це html документ, а другий - це DOM документ. html документ - це мова розмітки. І він не містить в собі нічого. Саме тому нам потрібен DOM документ, в якому кожному елемену в html документі відповідає свій DOM елемент.
Це причина по якій нам взагалі потрібен DOM.
Як я вже сказав, все DOM дерево являє собою набір елементів. І так, як це дерево, то у кожного елемента є батьківські і дочірні елементи. Наприклад у елемента html, батьківським елементом буде елемент "document", а дочірніми "head" і "body".
Отже ми знаємо, що DOM дерево складається з елементів, але це не зовсім так. Воно складається з node (по російськи вузлів) і вони бувають декількох типів. Один з них ми з вами вже розібрали - це елемент. Тобто div, p, body - це елементи.
Другий тип - це атрибути. Коли у нас написаний код
Те id = "container" - це атрибут нода. І третій тип - це текстова нода. Будь-який текст, який ми напишемо потрапляє в текстову ноду.
Саме так описується дерево. У прикладі з div, div - це елемент нода, id і текст - це 2 Ноди, які вкладені всередині елемент Ноди.