HTML | Свойства innerText и outerText — efim360.ru

HTML | Свойства innerText и outerText

Для веб-разработчиков (не нормативно)

element.innerText [ = value ]

Возвращает текстовое содержимое элемента «в том виде, в каком оно было отображено».

Можно установить, чтобы заменить дочерние элементы на заданное значение, но с разрывами строк, преобразованными в элементы br.

element.outerText [ = value ]

Возвращает текстовое содержимое элемента «в том виде, в каком оно было отображено».

Можно установить, чтобы заменить элемент заданным значением, но с разрывами строк, преобразованными в элементы br.

 

 

Шаги геттера innerText и externalText:

1. Если объект контекста (this) не отображается или если пользовательский агент не является пользовательским агентом CSS, верните текстовое содержимое потомка объекта контекста (this).
Примечание

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

2. Пусть результаты results будут новым пустым списком.
3. Для каждого дочернего узла node из объекта контекста (this):
  3.1 Пусть current будет списком, в результате которого выполняются шаги по сбору отрендеренного текста с помощью node. Каждый элемент в результатах results будет либо строкой, либо положительным целым числом (требуемый счётчик разрывов строк).
Примечание

Интуитивно, обязательный элемент счетчика разрывов строк означает, что в этой точке появляется определенное количество разрывов строк, но они могут быть свернуты разрывами строк, вызванными соседними обязательными элементами счётчика разрывов строк, что напоминает свёртывание полей CSS.

  3.2 Для каждого элемента item из current, добавить item в results.
4. Удалите все элементы из результатов results, которые являются пустой строкой.
5. Удалите любые повторы последовательных обязательных элементов счетчика разрывов строк (required line break count) в начале или в конце результатов results.
6. Замените каждую оставшуюся серию последовательных обязательных элементов счетчика разрывов строк строкой, состоящей из такого количества кодовых точек U+000A LF, как максимальное количество значений в требуемых элементах счётчика разрывов строк.
7. Верните конкатенацию строковых элементов в результатах results.

 

Шаги сбора отображаемого текста (rendered text collection steps), заданные узлом node, следующие:

1. Пусть элементы items будут результатом выполнения шагов сбора отрендеренного текста с каждым дочерним узлом node в порядке дерева, а затем объединения результатов в один список.
2. Если вычисленное значение "видимости" узла node не является "видимым", верните элементы items.
3.  Если узел node не визуализируется, верните элементы items. Для целей этого шага следующие элементы должны действовать так, как описано, если вычисленное значение свойства 'display' (отображать) не равно 'none' (нет):
  • элементы select (выбор) имеют связанный не заменяемый встроенный CSS-блок, дочерние поля которого включают только дочерние узлы optgroup и элемент option;
  • элементы optgroup имеют связанный не замененный CSS-блок на уровне блока, дочерние поля которого включают только дочерние узлы элемента option;
  • элемент option имеет связанный не замененный CSS-блок на уровне блока, дочерние поля которого являются обычными для не замененных блоков на уровне CSS-блоков.

Примечание

элементы могут быть непустыми из-за 'display:contents'.

4. Если узел node является текстовым узлом Text, то для каждого текстового поля CSS, созданного узлом node, в порядке содержимого вычислите текст поля после применения правил обработки CSS 'white-space' (пробелов) и правил 'text-transform' (преобразования текста), установите элементы items в список результирующих строк и верните элементы items. Правила обработки пробелов CSS 'white-space' немного изменены: складные пробелы в конце строк всегда сворачиваются, но они удаляются только в том случае, если строка является последней строкой блока или заканчивается элементом br. Мягкие дефисы должны быть сохранены. [CSSTEXT]
5. Если node является элементом br, то добавьте к элементам items строку, содержащую одну кодовую точку U+000A LF.
6. Если вычисленное значение узла node 'display' равно 'table-cell' (таблице-ячейке), а CSS-блок узла node не является последним полем 'table-cell' (таблица-ячейка) включающего его поля 'table-row' (таблица-строка), добавьте строку, содержащую одну кодовую точку U+0009 TAB указывает на элементы items.
7. Если вычисленное значение узла node 'display' равно 'table-row' (строке таблицы), а CSS-блок узла node не является последним полем 'table-row' (строка таблицы) ближайшего поля 'table' (таблица) предка, добавьте строку, содержащую одиночный код U+000A LF указывать на элементы items.
8. Если node является элементом p, добавьте 2 (требуемый счётчик разрыва строки) в начале и в конце элементов items.
9. Если используемое значение узла node из 'display' является уровень блока или 'table-caption', добавьте 1 (требуемый счётчик разрыва строки) в начале и в конце элементов. [CSSDISPLAY]
Примечание

В эту категорию попадают плавающие элементы и элементы с абсолютным позиционированием.

10. Вернуть items
Примечание

Обратите внимание, что узлы-потомки большинства заменяемых элементов (например, textarea, input и video, но не button) строго говоря не визуализируются CSS и, следовательно, не имеют блоков CSS для целей этого алгоритма.

 

Внимание

Этот алгоритм можно обобщить для работы с диапазонами. Затем мы можем использовать его в качестве основы для строкового фильтра Selection и, возможно, выставить его непосредственно на диапазонах. См. ошибку Bugzilla 10583.

 

Шаги установщика innerText:

1. Пусть фрагмент fragment будет отрендеренным текстовым фрагментом для заданного значения документа узла объекта контекста (this).
2. Замените всё фрагментом fragment внутри объекта контекста (this).

 

Шаги установцика outerText:

1. Если родитель объекта контекста (this) имеет значение null, то выдайте исключение DOMException "NoModificationAllowedError".
2. Пусть следующий next будет следующим родственником объекта контекста (this).
3. Пусть предыдущий previous будет предыдущим родственником объекта контекста (this).
4. Пусть фрагмент fragment будет отрендеренным текстовым фрагментом для заданного значения документа узла объекта контекста (this).
5. Замените объекта контекста (this) фрагментом fragment внутри родителя объекта контекста (this).
6. Если next не равен null, а предыдущий родственник next является текстовым узлом Text, то выполняется слияние со следующим текстовым узлом с учетом предыдущего родственного элемента next.
7. Если предыдущий previous является текстовым узлом Text, то он объединяется со следующим текстовым узлом с учетом previous.

 

Визуализированный текстовый фрагмент (rendered text fragment) для строки input с учетом документа Document document является результатом выполнения следующих шагов:

1. Пусть position будет переменной положения для ввода input, изначально указывающей на начало ввода input.
2. Пусть text будет пустой строкой.
3. Пока позиция position не находится за концом ввода input:
  3.1 Соберите последовательность кодовых точек, которые не являются U+000A LF или U+000D CR из input заданной position, и установите text в результат.
  3.2 Если text не является пустой строкой, добавьте к фрагменту новый узел Text, данные которого являются text, а документ узла является документом document.
  3.3 Пока позиция position не находится за концом ввода input, а кодовая точка в позиции position либо U+000A LF, либо U+000D CR:
    3.3.1 Если кодовая точка в позиции position является U+000D CR, а следующая кодовая точка является U+000A LF, то переместите позицию position к следующей кодовой точке в input.
    3.3.2 Переместить позицию position к следующей кодовой точке input.
    3.3.3 Добавить результат создания элемента с заданным документом document, br и пространством имен HTML к фрагменту fragment.

 

Чтобы объединиться со следующим текстовым узлом (merge with the next text node), заданным узлом Text node:

1. Пусть next будет следующим родственником узла node.
2. Если next не является текстовым узлом Text, вернитесь.
3. Замените данные узлом node, длиной данных node, 0 и данными next.
4. Если родитель next не равен null, то удалить next.
Примечание

Родительская проверка необходима, так как предыдущий шаг мог вызвать события мутации.

 

 

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

HTML | Алгоритм innerText

HTML | Алгоритм сбора отображаемого текста

JavaScript | Чем отличается innerText от textContent?

JavaScript | Чем отличается innerText от innerHTML?

Стандарт HTML - Раздел "3.2.7 The innerText and outerText properties" - https://html.spec.whatwg.org/#the-innertext-idl-attribute

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