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

Самое главное отличие в том, что innerText зависит от отрисовки элементов, а textContent нет.

Стоит добавить, что:

Выдержка из стандарта HTML

элемент.innerText [= значение]

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

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

Выдержка из стандарта DOM

элемент.textContent [= значение]

Возвращает текстовое содержимое потомка узла и представляет собой конкатенацию данных всех потомков узла Text в древовидном порядке.

Видео

 

Пример с разметкой

Есть простая разметка документа:

<p style="display: none;">Что?</p>
<p>Где?</p>
<p>Когда?</p>

Первый параграф не отрисовался. То есть мы применили CSS-стиль прямо на элементе, который заблокировал отрисовку элемента.

Применили стиль для элемента - display node - HTML
Применили стиль для элемента — display node — HTML

 

Обращаемся к innerText

Если сейчас мы обратимся к свойству innerText для родителя неотрисованного элемента

document.getElementsByTagName("div")[0].innerText

то получим

"Где?

Когда?"

Неожиданно правда? А куда делось слово «Что?». А innerText его не увидел т. к. оно небыло отрисовано.

innerText не вернул нам содержимое одного элемента - JavaScript
innerText не вернул нам содержимое одного элемента — JavaScript

 

Обращаемся к textContent

А теперь давайте обратимся к свойству textContent для того же родителя:

document.getElementsByTagName("div")[0].textContent

то получим

"
Что?
Где?
Когда?
"
textContent обнаружил всё что было скрыто от отрисовки - JavaScript
textContent обнаружил всё что было скрыто от отрисовки — JavaScript

 

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

DOM

Стандарт HTML — Раздел «3.2.7 The innerText getter and setter» — https://html.spec.whatwg.org/multipage/dom.html#the-innertext-idl-attribute

Стандарт DOM — Раздел «4.4. Interface Node» — https://dom.spec.whatwg.org/#dom-node-textcontent

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

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