Node.normalize(): восстановление нормализованной формы текстовых узлов в DOM!
После операций с Text, Range и точечной модификации DOM содержимое элемента может оказаться фрагментировано на несколько соседних текстовых узлов.
const container = document.createElement('div');
const text = document.createTextNode('Hello');
container.append(text);
const tail = text.splitText(2);
console.log([...container.childNodes].map(node => node.data));
// ['He', 'llo']
Для рендеринга это обычно не имеет значения:
console.log(container.textContent);
// Hello
Но для кода, который анализирует структуру дерева через childNodes, firstChild, nextSibling или хранит ссылки на конкретные Text-узлы, такая фрагментация уже существенна.
Метод Node.normalize() приводит всё поддерево узла к нормализованной форме:
container.normalize();
console.log(container.childNodes.length);
// 1
console.log(container.firstChild.data);
// Hello
Нормализация выполняется рекурсивно и гарантирует, что в обработанном поддереве: не останется пустых текстовых узлов; не останется соседних текстовых узлов без разделяющего их элемента, комментария или другого типа узла.
При объединении данные последующих Text-узлов добавляются к первому узлу группы, а сами последующие узлы удаляются из дерева.
console.log(tail.parentNode);
// null
Сохранённая ссылка tail при этом не становится невалидной: объект продолжает существовать, но больше не является частью DOM-дерева.
Важно и другое: normalize() не объединяет весь текст элемента в один узел, если между текстовыми узлами находятся другие узлы.
Hello DOM!
Здесь текст до и после останется в разных Text-узлах и после нормализации.
Метод особенно полезен после splitText(), операций с Range и редакторских сценариев, где текстовые узлы регулярно разрезаются и склеиваются:
const paragraph = document.createElement('p');
const text = document.createTextNode('Hello world');
paragraph.replaceChildren(text);
text.splitText(5);
console.log(paragraph.childNodes.length);
// 2
paragraph.normalize();
console.log(paragraph.childNodes.length);
// 1
🔥 Node.normalize() не меняет текстовое содержимое элемента, но приводит его поддерево к нормализованной форме: без пустых и соседних текстовых узлов. Это полезно перед обходом DOM, сериализацией, сравнением структуры или выполнением алгоритмов, которые рассчитывают на предсказуемую организацию Text-узлов.
📣 Code Ready | #практика
После операций с Text, Range и точечной модификации DOM содержимое элемента может оказаться фрагментировано на несколько соседних текстовых узлов.
const container = document.createElement('div');
const text = document.createTextNode('Hello');
container.append(text);
const tail = text.splitText(2);
console.log([...container.childNodes].map(node => node.data));
// ['He', 'llo']
Для рендеринга это обычно не имеет значения:
console.log(container.textContent);
// Hello
Но для кода, который анализирует структуру дерева через childNodes, firstChild, nextSibling или хранит ссылки на конкретные Text-узлы, такая фрагментация уже существенна.
Метод Node.normalize() приводит всё поддерево узла к нормализованной форме:
container.normalize();
console.log(container.childNodes.length);
// 1
console.log(container.firstChild.data);
// Hello
Нормализация выполняется рекурсивно и гарантирует, что в обработанном поддереве: не останется пустых текстовых узлов; не останется соседних текстовых узлов без разделяющего их элемента, комментария или другого типа узла.
При объединении данные последующих Text-узлов добавляются к первому узлу группы, а сами последующие узлы удаляются из дерева.
console.log(tail.parentNode);
// null
Сохранённая ссылка tail при этом не становится невалидной: объект продолжает существовать, но больше не является частью DOM-дерева.
Важно и другое: normalize() не объединяет весь текст элемента в один узел, если между текстовыми узлами находятся другие узлы.
Hello DOM!
Здесь текст до и после останется в разных Text-узлах и после нормализации.
Метод особенно полезен после splitText(), операций с Range и редакторских сценариев, где текстовые узлы регулярно разрезаются и склеиваются:
const paragraph = document.createElement('p');
const text = document.createTextNode('Hello world');
paragraph.replaceChildren(text);
text.splitText(5);
console.log(paragraph.childNodes.length);
// 2
paragraph.normalize();
console.log(paragraph.childNodes.length);
// 1
🔥 Node.normalize() не меняет текстовое содержимое элемента, но приводит его поддерево к нормализованной форме: без пустых и соседних текстовых узлов. Это полезно перед обходом DOM, сериализацией, сравнением структуры или выполнением алгоритмов, которые рассчитывают на предсказуемую организацию Text-узлов.
📣 Code Ready | #практика