Преобразование HTMLElement в строку в JavaScript

Быстрый ответ

Для того чтобы преобразовать объект HTMLElement в строку, используйте свойство outerHTML:

const elementString = document.getElementById('yourElementId').outerHTML;

Структура HTML-элемента теперь сохранена в переменной elementString.

Углублённые решения

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

// Сериализация элемента без его дочерних элементов.
const shallowString = document.getElementById('yourElementId').cloneNode().outerHTML;

// Для получения требуемого текстового содержимого.
const textString = document.getElementById('yourElementId').innerText;

innerHTML и innerText в действии

Если вам необходимо получить HTML-содержимое элемента, используйте innerHTML:

const innerHTMLContent = document.getElementById('yourElementId').innerHTML;

Если же требуется только текст, не включая HTML-элементы, примените innerText:

const plainTextContent = document.getElementById('yourElementId').innerText;

Знакомство с XMLSerializer

Для глубокой и зависимой от браузера сериализации применяйте XMLSerializer:

const serializer = new XMLSerializer();
const serializedElement = serializer.serializeToString(document.getElementById('yourElementId'));

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

Работа с пространствами имен и XML

При работе с пространствами имен XML или при сериализации HTMLElement, содержащих вложенные SVG или MathML, делайте так:

const element = document.getElementById('yourElementId');
const serializedXML = new XMLSerializer().serializeToString(element);

Этот метод идеально подойдет для документов в формате XML, точно сохраняя структуру элементов.

Замечание об атрибутах элементов

Для того чтобы включить атрибуты элемента в его строковое представление, используйте следующий сценарий:

const element = document.getElementById('yourElementId');
let attributesString = "";
for (let attribute of element.attributes) {
  attributesString += ` ${attribute.name}="${attribute.value}"`;
}

Созданную строку соедините с именем тега и innerHTML элемента для получения полноценного строкового представления.

Примените экосистему JavaScript

В обширном мире JavaScript-библиотек и фреймворков уже существует нужный вам инструмент. Изучите документацию React, Angular, Vue на предмет специализированных решений.

Не забывайте про безопасность

Будьте настороже в отношении рисков межсайтового скриптинга (XSS). Всегда очищайте вывод, особенно если он содержит пользовательский ввод или отображается в HTML-контексте.

Визуализация

Представляйте преобразование HTMLElement в строку как процесс перехода от трёхмерной скульптуры к двумерному изображению:

HTMLElement (🖼️): [Замысловатая скульптура]

➡️ "Сфотографировать" с помощью .outerHTML:

📸 -> '<div><p>Ваш текст здесь</p></div>'

➡️ "Нарисовать" используя .innerHTML:

✏️ -> '<p>Ваш текст здесь</p>'

Итоговое "произведение искусства" в виде двумерного изображения:

Blueprint String: '<div><p>Ваш текст здесь</p></div>'

Необходима полная картина? Объявление doctype и фрагменты документов

Если вам требуется сериализовать полные фрагменты документа с объявлением doctype, воспользуйтесь следующим кодом:

const doctype = new XMLSerializer().serializeToString(document.doctype);
const theWholeKitAndCaboodle = doctype + document.documentElement.outerHTML;

Это предоставит вам полное представление о документе со всеми его элементами.

Полезные материалы

1. HTMLElement – Веб API | MDN — Подробное описание интерфейса HTMLElement.
2. Строковое представление DOM-узлов с помощью JSON (и восстановление) | GitHub Gist — Примеры сериализации DOM-элементов.
3. Основы работы с DOM в чистом JavaScript (без jQuery) | SitePoint — Как продуктивно работать с DOM без использования вспомогательных библиотек.
4. XMLSerializer – Веб API | MDN — Руководство по сериализации узлов DOM.
5. Преобразование строки в DOM-узлы — Как возродить строки в DOM-узлы.