Node.textContent
Позволяет задавать или получать текстовое содержимое элемента и его потомков.
Синтаксис
var text = element.textContent; element.textContent = "Это просто текст";
Описание
textContent
возвращаетnull,
если узел является документом, типом документа, или его описанием. Для получения всего текста и CDATA-данных во всём документе можно использоватьdocument.documentElement.textContent
.- Если узел является CDATA, комментарием, инструкцией, или текстовым элементом,
textContent
возвращает текст внутри узла в виде строки (т.н. nodeValue). - Для узлов других типов
textContent
возвращает конкатенацию свойствtextContent
всех дочерних узлов, исключая комментарии и строки кода. Если узел не имеет дочерних узлов, будет возвращена пустая строка. - Установка данного значения удаляет все дочерние узлы и заменяет их единичным текстовым узлом с указанным значением.
Отличие от innerText
element.innerText
был введён Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:
Отличие от innerHTML
innerHTML
, как можно понять из его названия, возвращает HTML. Довольно часто innerHTML
используется для получения или записи текста в элемент. Тем не менее, вместо него желательно использовать textContent
: этот метод потребляет гораздо меньше ресурсов, так как текст парсится как текст, а не HTML. Кроме того, это защищает от XSS атак.
Пример
js
// Дан следующий фрагмент:
// <div id="block">Это — <span>просто</span> текст</div>
// Достаём текстовое содержимое:
var text = document.getElementById("block").textContent;
// В переменной |text| находится: "Это — просто текст".
// Меняем текст:
document.getElementById("block").textContent = "Это — просто текст";
// Теперь наш фрагмент выглядит так:
// <div id="block">Это — просто текст</div>
Совместимость с браузерами
BCD tables only load in the browser
Спецификации
Смотрите также
- Подробнее о различиях
innerText
иtextContent
(пост в блоге)