Свойство textContent
Пример
Получить текстовое содержимое элемента:
var x =
document.getElementById("myBtn").textContent;
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Свойство textContent задает или возвращает текстовое содержимое указанного узла и всех его потомков.
Если вы задаете свойство textContent, все дочерние узлы удаляются и заменяются одним текстовым узлом, содержащим указанную строку.
Примечание: Это свойство аналогично cвойству innerText, однако есть некоторые отличия:
- textContent возвращает текстовое содержимое всех элементов, в то время как innerText возвращает содержимое всех элементов, за исключением для элементов <script> и <style>.
- innerText не вернет текст элементов, скрытых с помощью CSS (текстовое содержимое вернет). Попробовать »
Совет: Иногда это свойство может быть использовано вместо свойства nodeValue, но помните, что это свойство также возвращает текст всех дочерних узлов.
Совет: Для установки или возврата HTML-содержимого элемента, используйте свойство innerHTML.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Да | Да | Да |
Синтаксис
Возвращает текстовое содержимое узла:
node.textContent
Задает текстовое содержимое узла:
node.textContent = text
Свойство значений
Значение | Тип | Описание |
---|---|---|
text | String | Задает текстовое содержимое указанного узла |
Технические детали
Вернёт значение | Строка, представляющая текст узла и всех его потомков. Возвращает значение null, если элемент является документом, типом документа или обозначением. |
---|---|
DOM Версия | Базовый уровень 3 Объект узла |
Ещё примеры
Пример
Изменить текстовое содержимое элемента <p> с помощью id="demo":
document.getElementById("demo").textContent = "Параграф изменён!";
Попробуйте сами »
Пример
Получить все текстовое содержимое элемента <ul> с помощью id="myList":
var x = document.getElementById("myList").textContent;
Значение x будет равно:
Кофе Чай
Попробуйте сами »
Пример
Этот пример демонстрирует некоторые различия между innerText, innerHTML и textContent:
<p id="demo"> Этот элемент имеет дополнительный интервал и содержит <span>элемент span</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
Попробуйте сами »
Получить содержимое элемента <p> выше с указанными свойствами:
innerText возвращает: "Этот элемент имеет дополнительный интервал и содержит элемент span."
innerHTML возвращает: " Этот элемент имеет дополнительный интервал и содержит <span>элемент span</span>."
textContent возвращает: " Этот элемент имеет дополнительный интервал и содержит элемент span."
Свойство innerText возвращает только текст, без пробелов и тегов внутренних элементов.
Свойство innerHTML возвращает текст, включая все интервалы и теги внутренних элементов.
Свойство textContent возвращает текст с интервалом, но без тегов внутренних элементов.