Свойство textContent в JavaScript: получение и установка текста

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

Чтобы получить текстовое содержимое узла и его потомков, используйте свойство textContent :

let text = node.textContent;

Предположим, у вас есть следующий фрагмент HTML:

<div id="note">
    JavaScript textContent Demo!
    <span style="display:none">Hidden Text!</span>
    <!-- my comment -->
</div>    

В следующем примере свойство textContent используется для получения текста элемента <div> :

let note = document.getElementById('note');
console.log(note.textContent);

Как это работает.

• Сначала выберите элемент div с примечанием id с помощью метода getElementById().
• Затем отобразите текст узла, обратившись к свойству textContent.

Выход:

JavaScript textContent Demo!
Hidden Text!

Как видно из вывода, свойство textContent возвращает конкатенацию textContent каждого дочернего узла, исключая комментарии (а также инструкции по обработке).

textContent против внутреннего innerText

С другой стороны, innerText учитывает стиль CSS и возвращает только удобочитаемый текст. Например:

let note = document.getElementById('note');
console.log(note.innerText);

Выход:

JavaScript textContent Demo!

Как видите, скрытый текст и комментарии не возвращаются.

Так как свойство innerText использует обновленный CSS для вычисления текста, доступ к нему вызовет перекомпоновку, которая требует значительных вычислительных ресурсов.

Перекомпоновка происходит, когда веб-браузеру необходимо снова обработать и отрисовать часть или всю веб-страницу.

Установка

Помимо чтения textContent, вы также можете использовать свойство textContent для установки текста для узла:

node.textContent = newText;

Когда вы устанавливаете textContent для узла, все дочерние элементы узла будут удалены и заменены одним текстовым узлом со значением newText. Например:

let note = document.getElementById('note');
note.textContent = 'This is a note';

Заключение

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