JS метод Element.normalize()

Загальний опис

normalize() є методом вузлів у моделі об'єктів документа (DOM), який об'єднує суміжні текстові вузли в один вузол. Цей метод корисний для оптимізації структури DOM та спрощення роботи з текстовим вмістом. Він часто використовується при маніпуляціях з DOM, коли текстовий вміст елемента може бути розділений на кілька окремих текстових вузлів.

Коли браузер обробляє HTML-розмітку, він може створювати додаткові текстові вузли для зберігання текстового вмісту. Це може статися, наприклад, при використанні шаблонних рядків або конкатенації рядків у JavaScript. Такі додаткові текстові вузли можуть ускладнити роботу з текстовим вмістом і знизити продуктивність маніпуляцій з DOM.

Розглянемо приклад HTML-розмітки:

<p id="myParagraph"></p>

Припустимо, що ми хочемо додати текстовий вміст до цього елемента <p> за допомогою JavaScript:

const paragraph = document.getElementById('myParagraph');
paragraph.appendChild(document.createTextNode('Це '));
paragraph.appendChild(document.createTextNode('приклад '));
paragraph.appendChild(document.createTextNode('тексту.'));

У цьому випадку текстовий вміст елемента <p> буде розділений на три окремі текстові вузли. Для отримання повного тексту доведеться ітеруватися по всіх дочірніх вузлах і збирати їх текстовий вміст.

Метод normalize() дозволяє уникнути цієї проблеми, об'єднуючи суміжні текстові вузли в один. Після виклику paragraph.normalize() текстовий вміст елемента <p> буде представлений одним текстовим вузлом з рядком "Це приклад тексту.".

Крім об'єднання текстових вузлів, метод normalize() також рекурсивно обробляє всі дочірні вузли, застосовуючи той самий процес об'єднання текстових вузлів. Це забезпечує повну нормалізацію всієї піддерева DOM.

Ось приклад використання normalize() для очищення структури DOM від зайвих текстових вузлів:

<div id="container">
  <p>Абзац 1</p>
  <!-- Коментар -->
  <p>
    Абзац 2
    <span>Вкладений елемент</span>
  </p>
</div>

const container = document.getElementById('container');
container.normalize();

Після виклику container.normalize() структура DOM буде нормалізована, і всі суміжні текстові вузли будуть об'єднані в один для кожного елемента.

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

Однак слід пам'ятати, що метод normalize() змінює структуру DOM безпосередньо. Тому його слід використовувати обережно, оскільки це може вплинути на інші частини додатку, які покладаються на певну структуру DOM.

Крім того, важливо враховувати, що виклик normalize() може бути ресурсномістким для великих DOM-дерев, оскільки він повинен обробляти всі вузли рекурсивно. Тому рекомендується використовувати цей метод лише тоді, коли це дійсно необхідно, і уникати зайвих викликів.

Загалом, метод normalize() є корисним інструментом для оптимізації структури DOM та спрощення роботи з текстовим вмістом. Він дозволяє об'єднувати суміжні текстові вузли в один, що може покращити продуктивність і полегшити маніпуляції з текстом. Однак його слід використовувати обережно, враховуючи можливий вплив на інші частини додатку та ресурсні витрати для великих DOM-дерев.

Ось кілька додаткових прикладів використання normalize():

1. Нормалізація вмісту після динамічного створення вузлів:

const container = document.getElementById('container');
const newText1 = document.createTextNode('Новий ');
const newText2 = document.createTextNode('текст');
container.appendChild(newText1);
container.appendChild(newText2);
container.normalize(); // Об'єднає newText1 і newText2 в один текстовий вузол

1. Нормалізація вмісту після маніпуляцій з DOM:

const paragraph = document.getElementById('paragraph');
const textNode = paragraph.firstChild;
const newTextNode = document.createTextNode('Додатковий текст');
textNode.splitText(5); // Розділяє текстовий вузол на два
paragraph.insertBefore(newTextNode, textNode.nextSibling); // Вставляє новий текстовий вузол
paragraph.normalize(); // Об'єднує всі текстові вузли в один

1. Нормалізація всього документа:

document.normalize(); // Нормалізує всі вузли в документі

Отже, метод normalize() є потужним інструментом для оптимізації структури DOM та роботи з текстовим вмістом. Його слід використовувати обережно, враховуючи можливий вплив на інші частини додатку та ресурсні витрати, але він може значно спростити маніпуляції з текстом і покращити продуктивність у певних ситуаціях.

правити

Порада

Пам'ятайте, що normalize() змінює структуру DOM безпосередньо. Тому використовуйте цей метод обережно, особливо якщо інші частини вашого додатку покладаються на певну структуру DOM. Перевіряйте, чи не вплине виклик normalize() на інші функції або компоненти.

автор: Bond правити

Порада

Зважайте на ресурсні витрати при використанні normalize() для великих DOM-дерев. Оскільки цей метод обробляє всі вузли рекурсивно, він може бути ресурсномістким для великих структур. Тому використовуйте його лише тоді, коли це дійсно необхідно, і уникайте зайвих викликів.

автор: Bond правити

Порада

Для досвідчених розробників: використовуйте normalize() після динамічних маніпуляцій з DOM, таких як створення, вставка або видалення вузлів. Це допоможе підтримувати чисту структуру DOM і уникнути зайвих текстових вузлів. Наприклад:

const container = document.getElementById('container');
const newText = document.createTextNode('Новий текст');
container.appendChild(newText);
container.normalize(); // Об'єднає новий текстовий вузол з існуючими

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

normalize()

Повернення

none

Повертає невизначене значення (undefined).

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	≤12.1	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

const parent = document.createElement("div");
const text1 = document.createTextNode("Це ");
const text2 = document.createTextNode("нормалізований ");
const text3 = document.createTextNode("текст.");

parent.appendChild(text1);
parent.appendChild(text2);
parent.appendChild(text3);

console.log(parent.childNodes.length); // Виведе: 3

parent.normalize();

console.log(parent.childNodes.length); // Виведе: 1
console.log(parent.firstChild.nodeValue); // Виведе: "Це нормалізований текст."

const list = document.createElement("ul");

const item1 = document.createElement("li");
const item1Text1 = document.createTextNode("Елемент ");
const item1Text2 = document.createTextNode("списку ");
const item1Text3 = document.createTextNode("1");
item1.appendChild(item1Text1);
item1.appendChild(item1Text2);
item1.appendChild(item1Text3);

const item2 = document.createElement("li");
const item2Text1 = document.createTextNode("Елемент ");
const item2Text2 = document.createTextNode("списку ");
const item2Text3 = document.createTextNode("2");
item2.appendChild(item2Text1);
item2.appendChild(item2Text2);
item2.appendChild(item2Text3);

list.appendChild(item1);
list.appendChild(item2);

document.body.appendChild(list);

list.normalize();