Node.textContent

Аннотация

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

Синтаксис

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>

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

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 ? ? ? ? ?

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

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

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

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