Атрибут textContent элемента HTML DOM

Определение и использование

textContent Этот атрибут устанавливает или возвращает текстовое содержимое заданного узла и всех его потомков.

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

Совет:Иногда этот атрибут можно использовать вместо атрибута nodeValue, но помните, что этот атрибут также возвращает текст всех подузлов.

См. также:

Атрибут innerText

Атрибут innerHTML

Пример

Пример 1

Возврат текстового содержимого элемента:

let text = element.textContent;

Попробуйте сами

Пример 2

Изменение текста элемента <p> с атрибутом id="demo":

element.textContent = "I have changed!";

Попробуйте сами

Пример 3

Получение всех текстовых данных элемента <ul> с атрибутом id="myList":

let text = document.getElementById("myList").textContent;

Попробуйте сами

Синтаксис

Вернуть текстовое содержимое узла:

element.textContent

или

node.textContent

Установить текстовое содержимое узла:

element.textContent = text
node.textContent = text

Значение свойства

Значение Описание
text Текстовое содержимое элемента или узла.

Возвратное значение

Тип Описание
Строка

Текстовое содержимое элемента и всех его потомков.

Если элемент является document, document type или notation, то возвращает null.

Разница между innerHTML, innerText и textContent

Свойство innerText возвращает:

Возвращает только текстовое содержимое элемента и всех его подэлементов, без скрытого текста CSS, пробелов и тегов, кроме элементов <script> и <style>.

Свойство innerHTML возвращает:

Текстовое содержимое элемента, включая все пробелы и внутренние HTML-теги.

Свойство textContent возвращает:

Текстовое содержимое элемента и всех его потомков, включая пробелы и скрытый текст CSS, но без тегов.

Пример HTML

<p id="myP">   Этот элемент имеет дополнительное пробелление     и содержит <span>элемент span</span>.</p>

Примеры JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Попробуйте сами

В примере выше:

Свойство innerText возвращает:

Этот элемент имеет дополнительное пробелление и содержит элемент span.

Свойство innerHTML возвращает:

   Этот элемент имеет дополнительное пробелление и содержит <span>элемент span</span>.

Свойство textContent возвращает:

   Этот элемент имеет дополнительное пробелление и содержит элемент span.

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

element.textContent Это функция DOM Level 3 (2004).

Все браузеры полностью поддерживают его:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка