Перейти до основного вмісту

Створення та видалення елементів

DOM API дозволяє не тільки вибирати або змінювати вже існуючі, але й видаляти, а також створювати нові елементи, після чого додавати їх в документ.

Створення​

document.createElement(tagName);

Створює елемент з ім'ям tagName і повертає посилання на нього як результат свого виконання. tagName - це рядок, що вказує тип елемента, який створюється. Елемент створюється в пам'яті, в DOM його ще немає.

const heading = document.createElement("h1");
console.log(heading); // <h1></h1>

heading.textContent = "This is a heading";
console.log(heading); // <h1>This is a heading</h1>

const image = document.createElement("img");
image.src = "https://placeimg.com/640/480/nature";
image.alt = "Nature";
console.log(image); // <img src="https://placeimg.com/640/480/nature" alt="Nature" />

Додавання​

Щоб створений елемент відображався на сторінці, його необхідно додати до вже існуючого елемента в DOM-дереві. Припустимо, що додаємо до певного елемента element, для цього існують методи.

  • element.append(el1, el2, ...) - додає один або декілька елементів після всіх дітей елемента element.
  • element.prepend(el1, el2, ...) - додає один або декілька елементів перед усіма дітьми елемента element.
  • element.after(el1, el2, ...) - додає один або декілька елементів після елемента element.
  • element.before(el1, el2, ...) - додає один або декілька елементів перед елементом element.

У всіх цих методах el - це елементи або рядки, в будь-якому поєднанні і кількості. Рядки додаються як текстові вузли.

Цікаво

Якщо елемент для додавання вже знаходиться в DOM, то він видаляється зі свого старого місця і додається у нове. З цього випливає правило - один і той самий елемент не може бути одночасно у двох місцях.

Видалення​

elem.remove();

Для того, щоб видалити елемент, використовується метод remove(). Він викликається на елементі elem, який необхідно видалити

Оптимізація роботи з DOM​

Сучасні браузери намагаються оптимізувати процес відтворення сторінки без втручання розробника. Проте, зміна DOM-дерева - це дорога операція, тому необхідно намагатися мінімізувати кількість звернень до DOM.

Repaint - відбувається, коли зміни торкнулися стилів, що впливають на зовнішній вигляд елемента, але не на геометрію. Наприклад opacity, background-color, visibility і outline. Браузер повторно створює елемент, з урахуванням нового стилю. Також перевіряється видимість інших елементів, один або більше можуть виявитися прихованими під елементом, що змінив зовнішній вигляд.

Reflow - відбувається, коли зміни впливають на вміст, структуру документу, положення елементів. Відбувається перерахунок позиціонування і розмірів, що призводить до повторного створення частини або всього документу. Зміна розміру одного батьківського контейнера вплине на всіх його дітей і предків. Має значно більший вплив на продуктивність, ніж repaint.

Усі перераховані вище операції блокують браузер. Сторінка не може виконувати жодні інші операції у той час, коли відбувається reflow або repaint. Причинами можуть бути:

  • Маніпуляції з DOM (додавання, видалення, зміна, перестановка елементів)
  • Зміна вмісту, зокрема тексту в полях форм
  • Розрахунок або зміна CSS-властивостей
  • Додавання і видалення таблиць стилів
  • Маніпуляції з атрибутом class
  • Маніпуляції з вікном браузера (зміни розмірів, прокручування)
  • Активація псевдокласів (наприклад, ':hover')