Разница между textContent и innerText в JavaScript

Быстрый ответ

textContent извлекает полный текст из узла, включая и текст, содержащийся в тегах script и style, не принимая во внимание CSS стилизацию. В отличие от него, innerText учитывает стилизацию и не включает в себя текст из скрытых элементов и скриптов. Более того, innerText заставляет браузер пересчитать расположение элементов, что может повлиять на эффективность его работы.

Рассмотрим пример:

// <div id="example"><script>//Секреты белки...</script>Видимый текст</div>

var elem = document.getElementById('example');

console.log(elem.textContent); // "Секреты белки...Видимый текст"
console.log(elem.innerText);   // "Видимый текст"

textContent демонстрирует высокую скорость работы, в то время как innerText сфокусирован на учете стиля.

Тщательное сравнение

Скорость и эффективность

Если скорость выполнения является приоритетным фактором, то textContent – лидер. innerText провоцирует браузер на повторный расчет расположения элементов, что снижает эффективность его работы, особенно на больших документах или при частых обновлениях страницы.

Подробнее об этом расскажет наш спикер на видео

Поддержка разными браузерами

textContent поддерживается широко всеми современными браузерами и типами узлов. innerText же оптимально работает с элементами HTMLElement. Если речь идет о таких старых браузерах как, например, IE8, можно использовать полифиллы через nodeValue.

Отображение текста в соответствии со стилями

innerText отлично учитывает стили и макет. Он учитывает визуальные особенности, к таковым относятся теги <br> и CSS display: none;, и предоставляет текст в легко воспринимаемом и понятном формате. В отличие от него, textContent игнорирует стили и отдает полный текст в элементе, не заботясь о его визуальном представлении.

Как выбрать подходящий инструмент

Для работы с текстом элемента

Для считывания или установки текста как в HTMLElement, так и в не-HTMLElement узлах, например, текстовых узлах, по возможности следует использовать textContent. Этот метод не зависит от CSS-стилизации и всегда воспроизводит полный текст.

Для работы с большими объемами текста

Когда необходимо обработать большие блоки текста или часто обновлять содержание страницы, textContent является наилучшим выбором. Это обеспечит высокую производительность и меньшую нагрузку на CPU.

Для доступа к тексту скрытых элементов

Если работа предполагает обращение к скрытым элементам, но при этом требуется доступ к их текстовому содержимому, textContent сможет помочь, ведь он не зависит от видимости элемента.

Продвинутое использование

Создание новых текстовых узлов

При создании новых текстовых узлов через document.createTextNode() textContent станет незаменимым помощником, позволив свободно интегрировать текст в структуру документа.

Чтение текста согласно CSS стилям

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

Визуализация

Если бы `textContent` и `innerText` можно было сравнить с нашими коллегами из офиса, то `textContent` напомнил бы порядочного клерка, который предложит любые документы, даже те, что пылятся в ящике стола. 🏢📚💼

А `innerText`, напротив, был бы более похож на привередливую секретаршу, которая предлагает только те документы, которые находятся на его столе. 🕵️‍♀️🗂️📝

Советы от профессионала и возможные проблемы

Использование Object.defineProperty с textContent

Рекомендую использовать Object.defineProperty, чтобы textContent функционировал корректно в рамках реальных и реактивных интерфейсов, а также полноценно интегрировался во фреймворки данных.

Обращаем ваше внимание на доступность

Оба свойства могут затронуть вопросы доступности. Важно отметить, что textContent может содержать скрытый текст, который может сбить с толку программы чтения с экрана. Между тем, innerText предлагает текст, который ориентирован на визуальное восприятие пользователем.

Пополняйте свои навыки

Пополняйте свои навыки, изучив дополнительные ресурсы. Очень полезным несомненно окажется блог Келли Нортона, где детально сравниваются innerText и textContent. Также вы сможете перейти на perfectionkills.com, чтобы увидеть тщательное сравнение этих свойств в таблице по результатам сравнения.

Полезные материалы

1. Node: textContent property – Web APIs | MDN – детализироанное описание свойства textContent.
2. HTMLElement: innerText property – Web APIs | MDN – полное руководство по innerText.
3. JavaScript DOM HTML – подробное руководство по изучению того, как изменять HTML с помощь JavaScript DOM.
4. Benchmark: innerText vs textContent vs innerHTML – MeasureThat.net – результаты сравнения производительности innerText, textContent и innerHTML.
5. Medium – дополнительный анализ различий между innerText и textContent.