JS: DOM API
2026-02-26 15:12 Diff
https://ru.hexlet.io/courses/js-dom/lessons/tree-manipulating/theory_unit

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

В этом уроке мы обсудим, как манипулировать DOM-деревьями и какие преимущества мы можем при этом получить.

innerHTML

Самый простой способ обновить часть DOM — это свойство innerHTML:

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

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

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

Свойство innerHTML работает со строками. Это удобно, только если мы работаем со статическим представлением DOM. Для динамического формирования хорошо подходят специальные функции.

Создание узлов

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

Вставка

ParentNode.prepend() добавляет переданный узел первым потомком в ParentNode:

ParentNode.append() добавляет переданный узел последним потомком в ParentNode:

childNode.before(...nodes) – вставляет nodes в список потомков родительского узла childNode прямо перед childNode:

childNode.after(...nodes) – вставляет nodes в список потомков родительского узла childNode сразу после childNode:

node.replaceWith(...nodes) – вставляет nodes вместо node. Сама node пропадает из DOM-дерева, но остается доступной в коде:

Element.remove() удаляет текущий узел.

Создание элемента не добавляет сразу этот элемент на страницу. Например, document.createElement('div') просто создаст объект элемента div. При этом этот объект не будет частью DOM-дерева. Поэтому нужно вставить этот объект в дерево, если нужно добавить его на страницу.

Старый API

Описанные выше функции появились не так давно. Большая часть кода написана с использованием других функций, список которых ниже:

  • parent.appendChild(el) – добавляет el в конец списка потомков
  • parent.insertBefore(el, nextElSibling) – добавляет el в список потомков parent перед nextElSibling
  • parent.removeChild(el) – удаляет el из потомков parent
  • parent.replaceChild(newEl, el) – заменяет el на newEl

Клонирование

Иногда нам нужно создать элемент, похожий на существующий. Конечно, это можно сделать вручную, скопировав свойства одного элемента в свойства другого. Но есть и более простой способ:

Значение true показывает, что мы создаем глубокую копию — то есть копию данного элемента со всеми его потомками.