Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

3 <h2>innerHTML</h2>

4 <p>Самый простой способ обновить часть DOM - это свойство innerHTML:</p>

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

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

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

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

9 <h2>Создание узлов</h2>

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

11 <h2>Вставка</h2>

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

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

14 <p><a>childNode.before(...nodes)</a>- вставляет nodes в список потомков родительского узла childNode прямо перед childNode:</p>

15 <p><a>childNode.after(...nodes)</a>- вставляет nodes в список потомков родительского узла childNode сразу после childNode:</p>

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

17 <p><a>Element.remove()</a>удаляет текущий узел.</p>

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

19 <h2>Старый API</h2>

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

21 <ul><li>parent.appendChild(el) - добавляет el в конец списка потомков</li>

22 <li>parent.insertBefore(el, nextElSibling) - добавляет el в список потомков parent перед nextElSibling</li>

23 <li>parent.removeChild(el) - удаляет el из потомков parent</li>

24 <li>parent.replaceChild(newEl, el) - заменяет el на newEl</li>

25 </ul><h2>Клонирование</h2>

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

27 <p>Значение true показывает, что мы создаем<strong>глубокую копию</strong>- то есть копию данного элемента со всеми его потомками.</p>