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>

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

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

• textContent

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

• Подробнее о различиях innerText и textContent (пост в блоге)