JavaScript | Влияние инлайновых стилей CSS-свойства «display» на работу innerText через DOMParser — efim360.ru

JavaScript | Влияние инлайновых стилей CSS-свойства "display" на работу innerText через DOMParser

В этой публикации хочется проверить, какую объектную модель документа создаст интерфейс 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>

&nbsp;

Строка

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>`
Строка с обычной HTML-разметкой без стилей - JavaScript
Строка с обычной HTML-разметкой без стилей - JavaScript

Документ

let nDoc = new DOMParser().parseFromString(stroka,"text/html")
Новый документ из обычной HTML-разметки без стилей - JavaScript
Новый документ из обычной HTML-разметки без стилей - JavaScript

Теперь извлекаем текстовое содержимое единственного элемента div при помощи свойства innerText:

nDoc.getElementsByTagName('div')[0].innerText

'ЗаголовокТекст1Текст2Текст3Красный СинийКоричневый'

Получаем слипшуюся строку текста его потомков, без разделения на "\n". И это ОЧЕНЬ грустно. С таким текстом невозможно работать.

innerText вернул слипшуюся строку текста потомков элемента div - JavaScript
innerText вернул слипшуюся строку текста потомков элемента div - JavaScript

 

В чём задача?

Хочется понять, могут ли инлайновые стили влиять на итоговое построение объекта документа при помощи парсера DOMParser

 

Что есть у CSS-свойства "display" на 2022 год?

Чтобы решАть задачу, нужно изучить все варианты оформления свойства CSS-свойства "display".

На 2022 год их существует 18 разновидностей:

Short display Full display Generated box
none subtree omitted from box tree
contents element replaced by contents in box tree
block block flow block-level block container aka block box
flow-root block flow-root block-level block container that establishes a new block formatting context (BFC)
inline inline flow inline box
inline-block inline flow-root inline-level block container aka inline block
run-in run-in flow run-in box (inline box with special box-tree-munging rules)
list-item block flow list-item block box with additional marker box
inline list-item inline flow list-item inline box with additional marker box
flex block flex block-level flex container
inline-flex inline flex inline-level flex container
grid block grid block-level grid container
inline-grid inline grid inline-level grid container
ruby inline ruby inline-level ruby container
block ruby block ruby block box containing ruby container
table block table block-level table wrapper box containing table grid box
inline-table inline table inline-level table wrapper box containing table grid box
<display-internal> types layout-specific internal box

 

Что будем делать?

Для начала предлагаю не вникать в их смысл и просто присвоить их каждому вложенному в div элементу. И самому div тоже накинуть. Погнали.

  1. style="display: none;"
  2. style="display: contents;"
  3. style="display: block;"
  4. style="display: flow-root;"
  5. style="display: inline;"
  6. style="display: inline-block;"
  7. style="display: run-in;"
  8. style="display: list-item;"
  9. style="display: inline list-item;"
  10. style="display: flex;"
  11. style="display: inline-flex;"
  12. style="display: grid;"
  13. style="display: inline-grid;"
  14. style="display: ruby;"
  15. style="display: block ruby;"
  16. style="display: table;"
  17. style="display: inline-table;"

Итог: инлайновые стили не влияют на первично созданную модель DOM. Скорее всего нужно копать в сторону модели CSSOM и дожидаться её полного создания, чтобы каждый элемент применил к своему дизайну стили. Из-за этого будет построена правильная визуализация страницы и только тогда можно будет получить корректный innerText.

 

Информационные ссылки

CSS | Модуль отображения | Уровень 3

Поделись записью