В этой публикации хочется проверить, какую объектную модель документа создаст интерфейс DOMParser, если в передаваемой для разбора строке будут включены атрибуты style внутрь HTML-разметки элементов, без дополнительных стилевых файлов CSS.
В качестве CSS-свойства для стилизации будем использовать «display», потому что оно влияет на итоговый рендеринг (визуализацию) документа.
В чём проблема?
Созданный через DOMParser объект документа (document) возвращает слипшуюся строку текста при обращении к свойству innerText какого-нибудь блочного элемента. Давайте посмотрим на пример HTML-разметки (на потенциальную JavaScript-строку):
<!DOCTYPE html>
<html lang=«ru»>
<head>
<meta charset=«UTF-8»>
<meta http-equiv=«X-UA-Compatible» content=«IE=edge»>
<meta name=«viewport» content=«width=device-width, initial-scale=1.0»>
<title>DOMParser display innerText</title>
</head>
<body>
<div>
<h1>Заголовок</h1>
<p>Текст1</p>
<p>Текст2</p>
<p>Текст3</p>
<ul>
<li>Красный</li>
<li>Синий</li>
<li>Коричневый</li>
</ul>
</div>
</body>
</html>
Строка
let stroka = `<!DOCTYPE html><html lang="ru"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOMParser display innerText</title></head><body><div><h1>Заголовок</h1><p>Текст1</p><p>Текст2</p><p>Текст3</p><ul><li>Красный</li> <li>Синий</li><li>Коричневый</li></ul></div></body></html>`
Документ
let nDoc = new DOMParser().parseFromString(stroka,"text/html")
Теперь извлекаем текстовое содержимое единственного элемента div при помощи свойства innerText:
nDoc.getElementsByTagName('div')[0].innerText
'ЗаголовокТекст1Текст2Текст3Красный СинийКоричневый'
Получаем слипшуюся строку текста его потомков, без разделения на «\n«. И это ОЧЕНЬ грустно. С таким текстом невозможно работать.
В чём задача?
Хочется понять, могут ли инлайновые стили влиять на итоговое построение объекта документа при помощи парсера DOMParser
Что есть у CSS-свойства «display» на 2022 год?
Чтобы решАть задачу, нужно изучить все варианты оформления свойства CSS-свойства «display».
На 2022 год их существует 18 разновидностей:
Что будем делать?
Для начала предлагаю не вникать в их смысл и просто присвоить их каждому вложенному в div элементу. И самому div тоже накинуть. Погнали.
- style=»display: none;»
- style=»display: contents;»
- style=»display: block;»
- style=»display: flow-root;»
- style=»display: inline;»
- style=»display: inline-block;»
- style=»display: run-in;»
- style=»display: list-item;»
- style=»display: inline list-item;»
- style=»display: flex;»
- style=»display: inline-flex;»
- style=»display: grid;»
- style=»display: inline-grid;»
- style=»display: ruby;»
- style=»display: block ruby;»
- style=»display: table;»
- style=»display: inline-table;»
Итог: инлайновые стили не влияют на первично созданную модель DOM. Скорее всего нужно копать в сторону модели CSSOM и дожидаться её полного создания, чтобы каждый элемент применил к своему дизайну стили. Из-за этого будет построена правильная визуализация страницы и только тогда можно будет получить корректный innerText.
