Разница между 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, чтобы увидеть тщательное сравнение этих свойств в таблице по результатам сравнения.
Полезные материалы
- Node: textContent property – Web APIs | MDN – детализироанное описание свойства
textContent
. - HTMLElement: innerText property – Web APIs | MDN – полное руководство по
innerText
. - JavaScript DOM HTML – подробное руководство по изучению того, как изменять HTML с помощь JavaScript DOM.
- Benchmark: innerText vs textContent vs innerHTML – MeasureThat.net – результаты сравнения производительности
innerText
,textContent
иinnerHTML
. - Medium – дополнительный анализ различий между
innerText
иtextContent
.