Свойство HTML DOM textContent
Пример
Получить текстовое содержимое элемента:
var x =
document.getElementById("myBtn").textContent;
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство textContent задает или возвращает текстовое содержимое указанного узла и всех его потомков .
Если вы задаете свойство textContent, все дочерние узлы удаляются и заменяются одним узлом Text, содержащим указанную строку.
Примечание. Это свойство похоже на свойство innerText , однако есть некоторые отличия:
- textContent возвращает текстовое содержимое всех элементов, а innerText возвращает содержимое всех элементов, кроме элементов <script> и <style>.
- innerText не будет возвращать текст элементов, которые скрыты с помощью CSS (текстовый контент будет).
Совет: Иногда это свойство можно использовать вместо свойства nodeValue , но помните, что это свойство также возвращает текст всех дочерних узлов.
Совет: Чтобы установить или вернуть HTML-содержимое элемента, используйте свойство innerHTML .
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Yes | Yes | Yes |
Синтаксис
Вернуть текстовое содержимое узла:
node.textContent
Установите текстовое содержимое узла:
node.textContent = text
Значения свойств
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
Технические детали
Возвращаемое значение: | Строка, представляющая текст узла и всех его потомков. Возвращает null, если элемент является документом, типом документа или нотацией. |
---|---|
DOM-версия | Базовый объект узла уровня 3 |
Дополнительные примеры
Пример
Измените текстовое содержимое элемента <p> с помощью id="demo":
document.getElementById("demo").textContent = "Paragraph changed!";
Пример
Получите все текстовое содержимое элемента <ul> с id="myList":
var x = document.getElementById("myList").textContent;
Значение х будет:
Coffee Tea
Пример
Этот пример демонстрирует некоторые различия между innerText, innerHTML и textContent:
<p id="demo"> This element has extra spacing and contains <span>a span
element</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 возвращает текст с пробелами, но без тегов внутренних элементов.