We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Аннотация

Позволяет задавать или получать текстовое содержимое элемента и его потомков.

Синтаксис

var text = element.textContent;
element.textContent = "Это просто текст";

Описание

  • textContent возвращает null, если узел является документом, типом документа, или его описанием. Для получения всего текста и CDATA-данных во всём документе можно использовать document.documentElement.textContent.
  • Если узел является CDATA, комментарием, инструкцией, или текстовым элементом, textContent возвращает текст внутри узла в виде строки (т.н. nodeValue).
  • Для узлов других типов textContent возвращает конкатенацию свойств textContent всех дочерних узлов, исключая комментарии и строки кода. Если узел не имеет дочерних узлов, будет возвращена пустая строка.
  • Установка данного значения удаляет все дочерние узлы и заменяет их единичным текстовым узлом с указанным значением.

Отличие от innerText

element.innerText был введен Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:

  • textContent получает содержимое всех элементов, включая  <script> и <style>, тогда как innerText этого не делает.
  • innerText умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как textContent этого не делает.
  • Метод innerText позволяет получить CSS, а textContent — нет.

Отличие от innerHTML

innerHTML, как можно понять из его названия, возвращает HTML. Довольно часто innerHTML используется для получения или записи текста в элемент. Тем не менее, вместо него желательно использовать textContent: этот метод потребляет гораздо меньше ресурсов, так как текст парсится как текст, а не HTML. Кроме того, это защищает от XSS атак.

Пример

// Дан следующий фрагмент:
//   <div id="block">Это — <span>просто</span> текст</div>

// Достаем текстовое содержимое:
var text = document.getElementById("block").textContent;
// В переменной |text| находится: "Это — просто текст".

// Меняем текст:
document.getElementById("block").textContent = "Это — просто текст";
// Теперь наш фрагмент выглядит так:
//   <div id="block">Это — просто текст</div>

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1+ (Да) 9 (Да) (Да)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

Спецификация

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: Natalya_Surikova, AlexAlex, fscholz, smaximov, khalid32, Norville, Troynov
Обновлялась последний раз: Natalya_Surikova,