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