logo
Javascript
NodeJS
ReactNative

DOM-дерево

19-04-25 08:32:19

Image for the DOM-дерево

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Пример</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
  </body>
</html>

Преобразуется в дерево:

  • Узел документа (document) — корень.
  • Дочерние узлы: <html>.
  • Внутри <html>: <head> и <body>.
  • Внутри <head>: <title> с текстом "Пример".
  • Внутри <body>: <h1> с текстом "Привет, мир!".

Каждый узел имеет тип (например, Element, Text, Comment) и свойства (родитель, дети, атрибуты).

Типы узлов DOM

  1. Document: Корневой узел (например, document).
  2. Element: HTML-теги (<div>, <p>).
  3. Text: Текстовое содержимое элементов.
  4. Attr: Атрибуты элементов (например, class="button").
  5. Comment: Комментарии в HTML.

Доступ к элементам DOM

JavaScript предоставляет методы для выборки элементов:

1. По идентификатору:

const header = document.getElementById('header');

2. По классу (возвращает коллекцию):

​const buttons = document.getElementsByClassName('btn');

3. По тегу:

const paragraphs = document.getElementsByTagName('p');

​4. Современные методы:

// Первый совпадающий элемент
const element = document.querySelector('.container');
// Все элементы с классом 'item'
const items = document.querySelectorAll('.item');

Изменение DOM

Примеры:

<p id="demo">Изначальный текст</p>

<script>
  const paragraph = document.querySelector('#demo');
  // Изменение текста
  paragraph.textContent = 'Новый текст!';
  // Добавление HTML
  paragraph.innerHTML = '<strong>Жирный текст</strong>';
</script>
const div = document.querySelector('div');
// Добавить класс
div.classList.add('active');
// Удалить класс
div.classList.remove('old-class');
// Переключить класс
div.classList.toggle('hidden');
// Создать элемент
const newButton = document.createElement('button');
newButton.textContent = 'Нажми меня';
// Добавить в конец body
document.body.appendChild(newButton);

События и DOM

JavaScript позволяет реагировать на действия пользователя:

<button id="myButton">Кликни</button>

<script>
  const button = document.querySelector('#myButton');
  button.addEventListener('click', () => {
    alert('Кнопка нажата!');
    button.style.backgroundColor = 'red';
  });
</script>

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

Использование свойств узлов для перемещения:

const parent = element.parentNode; // Родитель
const firstChild = element.firstChild; // Первый потомок
const siblings = element.parentNode.children; // Все дети родителя

Оптимизация работы с DOM

Минимизируйте перерисовки: Группируйте изменения с помощью DocumentFragment:

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const item = document.createElement('div');
  item.textContent = `Элемент ${i}`;
  fragment.appendChild(item);
}
document.body.appendChild(fragment);

Кэшируйте ссылки на элементы: Избегайте многократных запросов вроде document.querySelector в циклах.

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

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