PrepBro
← Назад к вопросам

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

1.3 Junior🔥 231 комментариев
#Браузер и сетевые технологии

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI21 мар. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

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

DOM (Document Object Model) это программный интерфейс для взаимодействия с HTML и XML документами. DOM-дерево это иерархическое представление всех элементов на веб-странице в виде дерева объектов.

Что такое DOM-дерево - визуально

ЖДомен-дерево отображает структуру HTML документа:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <header>
      <h1>Welcome</h1>
    </header>
    <main>
      <div id="content">
        <p>Hello World</p>
        <button>Click me</button>
      </div>
    </main>
  </body>
</html>

Это преобразуется в DOM-дерево:

                    document
                       |
                     html
                    /    \
                 head    body
                  |       / \
               title   header main
                |        |     |
           "My Page"    h1   div#content
                        |      /    \
                      "Welcome" p   button
                                |    |
                          "Hello World" "Click me"

Основные типы узлов

1. Document - корень всего

// Документ - точка входа ко всему DOM
console.log(document); // Document объект
console.log(document.documentElement); // <html> элемент
console.log(document.body); // <body> элемент

2. Element Nodes - теги

// Елементы - это теги HTML
const div = document.querySelector('div');
console.log(div.nodeName); // 'DIV'
console.log(div.nodeType); // 1 (Element)

// У элементов есть свойства
div.className = 'container';
div.id = 'main';
div.style.color = 'red';

3. Text Nodes - текст

// Текст - это отдельные узлы
const p = document.querySelector('p');
console.log(p.childNodes); // содержит Text node
console.log(p.childNodes[0].nodeValue); // 'Hello World'
console.log(p.childNodes[0].nodeType); // 3 (Text)

4. Attribute Nodes - атрибуты

// Атрибуты (кроме как часть элемента)
const button = document.querySelector('button');
console.log(button.getAttribute('id')); // значение атрибута
console.log(button.attributes); // все атрибуты

5. Comment Nodes - комментарии

<!-- Это комментарий -->

// Комментарии тоже узлы
console.log(nodeType === 8); // Comment node

Навигация по DOM-дереву

Родитель (Parent)

const button = document.querySelector('button');

// parentNode - прямой родитель
console.log(button.parentNode); // <div id="content">

// parentElement - то же, но только элементы
console.log(button.parentElement); // <div id="content">

// Подняться выше
console.log(button.parentElement.parentElement); // <main>

Дети (Children)

const div = document.querySelector('div');

// childNodes - все дети (включая текстовые узлы)
console.log(div.childNodes); // NodeList [text, element, text, element]

// children - только элементы (быстрее)
console.log(div.children); // HTMLCollection [p, button]

// firstChild / lastChild - включают текстовые узлы
console.log(div.firstChild); // Может быть #text

// firstElementChild / lastElementChild - только элементы
console.log(div.firstElementChild); // <p>
console.log(div.lastElementChild); // <button>

Соседи (Siblings)

const button = document.querySelector('button');

// nextSibling - следующий (может быть #text)
console.log(button.nextSibling);

// nextElementSibling - следующий элемент
console.log(button.nextElementSibling);

// previousSibling / previousElementSibling
console.log(button.previousElementSibling); // <p>

Поиск элементов в DOM

1. getElementById (быстро)

const element = document.getElementById('content');
console.log(element); // <div id="content">

2. querySelector / querySelectorAll (мощно)

// Один элемент
const first = document.querySelector('.item');
const button = document.querySelector('button');
const main = document.querySelector('main > div');

// Все элементы
const items = document.querySelectorAll('.item');
console.log(items.length);

// Можно использовать любые CSS селекторы
const active = document.querySelectorAll('[data-active="true"]');

3. getElementsByClassName (живое)

// Динамический список (обновляется при изменении DOM)
const items = document.getElementsByClassName('item');
console.log(items.length); // 3

const newItem = document.createElement('div');
newItem.className = 'item';
document.body.appendChild(newItem);

console.log(items.length); // 4 - обновился автоматически!

4. getElementsByTagName

const buttons = document.getElementsByTagName('button');
const links = document.getElementsByTagName('a');

Изменение DOM-дерева

Добавление элементов

// Создать новый элемент
const newDiv = document.createElement('div');
newDiv.className = 'container';
newDiv.textContent = 'Hello!';

// Добавить в конец
document.body.appendChild(newDiv);

// Добавить в начало
document.body.insertBefore(newDiv, document.body.firstChild);

// Добавить в конкретное место
const parent = document.querySelector('.parent');
const sibling = document.querySelector('.sibling');
parent.insertBefore(newDiv, sibling);

Удаление элементов

const element = document.querySelector('#item');

// Удалить элемент
element.remove();

// Или через родителя (старый способ)
element.parentNode.removeChild(element);

Изменение содержимого

const paragraph = document.querySelector('p');

// Текст
paragraph.textContent = 'New text';

// HTML (опасно, если ненадежный источник)
paragraph.innerHTML = '<strong>Bold text</strong>';

// Более безопасно - работать с элементами
const strong = document.createElement('strong');
strong.textContent = 'Bold text';
paragraph.appendChild(strong);

Изменение атрибутов

const element = document.querySelector('input');

// Установить атрибут
element.setAttribute('type', 'password');
element.setAttribute('placeholder', 'Enter password');

// Или через свойства
element.id = 'password-input';
element.className = 'form-control';

// Получить атрибут
console.log(element.getAttribute('type')); // 'password'

// Проверить наличие
if (element.hasAttribute('disabled')) {
  console.log('Disabled');
}

// Удалить атрибут
element.removeAttribute('disabled');

Работа с классами

const element = document.querySelector('.card');

// Добавить класс
element.classList.add('active');

// Удалить класс
element.classList.remove('active');

// Переключить класс
element.classList.toggle('active'); // Если есть, удалить; если нет - добавить

// Проверить наличие класса
if (element.classList.contains('active')) {
  console.log('Element is active');
}

// Заменить класс
element.classList.replace('old-class', 'new-class');

Производительность: Live vs Static

// Live - обновляется автоматически (медленнее)
const liveList = document.getElementsByClassName('item');

// Static - снимок в момент времени (быстрее)
const staticList = document.querySelectorAll('.item');

// Пример
const items = document.getElementsByClassName('item'); // Live
console.log(items.length); // 10

// Добавить элемент
const newItem = document.createElement('div');
newItem.className = 'item';
document.body.appendChild(newItem);

console.log(items.length); // 11 - обновился!

Virtual DOM vs Real DOM

Real DOM (традиционный):

  • Медленно обновлять (особенно большие дерева)
  • Каждое изменение перерисовывает страницу

Virtual DOM (React, Vue):

  • Виртуальное представление DOM
  • Вычисляет минимальные изменения
  • Одним пакетом обновляет Real DOM
  • Намного быстрее

Итого

DOM-дерево это:

  • Иерархическое представление всех элементов страницы
  • Состоит из разных типов узлов (Elements, Text, Comments)
  • Можно навигировать, искать и изменять через JavaScript
  • Основа для взаимодействия с веб-страницей
  • Modern фреймворки (React) манипулируют DOM через Virtual DOM для оптимизации