Последнее обновление: 04 ноября 2020 г.

Свойства textContent, innerHTML, nodeValue: некоторые особенности

Казалось бы, что может быть проще? Свойство textContent выдает текстовое содержание узла, innerHTML – его html-код (не включая теги самого узла), а nodeValue – в зависимости от того, какого типа этот узел. Если тег – то выдает его содержимое, а если это текстовый узел – то nodeValue не определено.

Всё так, но, что именно называть «текстом», и что – «тегами»?

Рассмотрим пример. Сделаем умышленно некорректный html-код (который, впрочем, нормально воспринимается практически всеми современными браузерами), извлечем указанные три его свойства и поместим их в соседнюю текстовую область textarea:

1. <div id="qwerty">русские буквы & &amp; &lt; < <img /> <!--comment--> </div>
2. <textarea id="qwerty-textarea" cols="60" rows="12"></textarea>

3. <script>
4. var elem = document.getElementById('qwerty');
5. document.getElementById('qwerty-textarea').textContent = elem.innerHTML+'\n'+elem.textContent+'\n'+elem.nodeValue+'\n';

6. document.getElementById('qwerty-textarea').textContent += elem.childNodes.item(0).innerHTML+'\n'+elem.childNodes.item(0).textContent+'\n'+elem.childNodes.item(0).nodeValue;

7. document.getElementById('qwerty-textarea').textContent += elem.children.item(0).innerHTML+'\n'+elem.children.item(0).textContent+'\n'+elem.children.item(0).nodeValue;
8. </script>

И вот что будет в теге div:

русские буквы & & < <

и в текстовой области:

1. русские буквы &amp; &amp; &lt; &lt; <img> <!--comment-->
2. русские буквы & & < <  
3. null
4. undefined
5. русские буквы & & < <
6. русские буквы & & < <

7. null

Выводы

Как видно, html-теги несколько по-разному воспринимаются этими свойствами:

1. Свойство innerHTML преобразует некорректный код в корректный и возвращает ВСЁ содержимое узла div. При этом одиночный амперсанд преобразуется в соответствующую ему корректную html-сущность &, а символ < - в html-сущность <. Кроме того, innherHTML выводит и комментарий.
2. Свойство textContent выдает только текст между тегами <div>… </div>. При этом, во-первых, как теги (в данном случае – тег img), так и комментарии (так как это – не текст) исключаются. Во-вторых, в отличие от innerHTML, это свойство возвращает текст именно в таком виде, в котором он будет виден пользователю в окне браузера. А не в том, в котором он представлен в теге!
3. nodeValue ведет себя по-разному. Если узел, из которого оно берется, представляет собой тег, то это свойство неопределено. Если же это - текстовый узел, то результат применения этого свойства совпадает с textContent, т.е. выдается «текстовое» его выражение

Замечания по поводу различия textContent и innerHTML

Так что, на самом деле, оно возвращает не совсем именно «текст», как могло бы показаться. Скорее, оно возвращает текстовый контент, т.е. такой контент, который формируется браузером уже после преобразования html-сущностей (как корректных, так и некорректных). Т.е. это, в самом деле, именно текстовое содержимое, текстовый контент, отсюда и название свойства (textContent).

А не просто содержимое узла без тегов!

Тогда как innerHTML выдает именно ВНУТРЕННЕЕ содержимое соответствующего узла (если этот узел – тег). Преобразования при этом делаются минимальные и касаются они только некорректных сущностей и неправильных тегов, которые браузер пытается преобразовать в корректные и правильные. Тогда как все корректное оставляется как есть и выводится в том же самом виде.

Поэтому, строго говоря, даже если в том или ином теге нет других тегов, тем не менее, какое из этих свойств применять при чтении (или замене) его содержимого – это зависит от того, что именно необходимо получить: преобразованные в текст html-сущности или, все-таки, сами эти сущности БЕЗ преобразования.

Это может быть актуально, например, при отображении на вебстраницах программных кодов.