JavaScript свойство Node.textContent

Определение и применение

JavaScript свойство textContent объекта Node возвращает, или задает текстовое содержимое элемента и всех его потомков.

Для Document и DocumentType свойство textContent возвращает null. Для текстовых узлов, комментариев, CDATA и инструкций обработки возвращается их содержимое. Для Attr — значение атрибута.

Для других типов узлов textContent возвращает конкатенацию значений свойства textContent каждого дочернего узла, исключая узлы комментария и инструкции по обработке (ProcessingInstruction). Если у узла нет дочерних элементов, то это пустая строка.

Отличие свойства textContent от innerHTML

Свойство innerHTML объекта Element возвращает HTML, зачастую это свойство используется для получения, или записи текста внутри элемента. Свойство textContent имеет лучшую производительность, поскольку его значение не анализируется как HTML, кроме того, использование textContent может предотвратить XSS атаки (англ. Cross-Site Scripting — "межсайтовый скриптинг").

Отличие свойства textContent от innerText

textContent собирает текст потомков независимо от CSS, включая содержимое script и style. innerText у отображаемого элемента учитывает оформление и видимость, а также вставляет переносы строк согласно отображению.

Если сам элемент не отображается, например находится в отсоединённом дереве или имеет display: none, чтение innerText возвращает текст потомков по правилам textContent. Поэтому innerText нельзя считать универсальным способом исключить скрытый текст.

В отличие от textContent, изменение innerText в устаревшем Internet Explorer (версии 11 и ниже) удаляло дочерние узлы из элемента, и окончательно уничтожало все дочерние текстовые узлы, в результате чего было невозможно вставить узлы снова в любой другой элемент, или в тот же элемент.

Для узла Attr свойство возвращает или меняет значение атрибута. Для Document и DocumentType результат равен null, а присваивание не действует.

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

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Node.textContent

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
textContent	✓1	✓12	✓1	✓9	✓3	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

// получение текста
const content = node.textContent;

// установка текста
node.textContent = text;

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

DOM Standard.

Пример использования

Чтение текста пунктов списка

Нажмите ▶, затем Show values: под кнопкой появится текстовое содержимое каждого пункта списка.

index.html

HTML

<button data-migration-click-0="">Show values</button>
<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>
<p id="result"></p>

main.js

JavaScript

function myFunc(currentElem) {
    const listElements = document.querySelectorAll('li')
    let result = document.getElementById('result')

    for (let i = 0; i < listElements.length; i++) {
        result.innerHTML += listElements[i].textContent + '<br>'
    }
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию, которая с помощью цикла обходит все элементы <li> и с помощью свойства textContent получает текстовое содержимое элемента. После того как получены значения содержимого всех элементов <li> мы добавляем это значение в содержимое элемента <p>.

В следующем примере мы рассмотрим как с помощью свойства textContent задавать текстовое содержимое элемента:

Изменение текста пунктов списка

Нажмите ▶, затем Increment несколько раз: число в каждом пункте увеличивается на единицу, потому что textContent читается, преобразуется в число и записывается обратно.

index.html

HTML

<button data-migration-click-0="">Increment</button>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

main.js

JavaScript

function myFunc(currentElem) {
    const listElements = document.querySelectorAll('li')

    for (let i = 0; i < listElements.length; i++) {
        listElements[i].textContent = Number(listElements[i].textContent) + 1
    }
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию, которая с помощью цикла обходит все элементы <li>, и с помощью свойства textContent изменяет текстовое содержимое всех элементов коллекции. В первую очередь мы приводим строковое значение текущего элемента к числу, а затем добавляем к этому значению единицу, в результате чего все наши элементы маркированного списка (<ul>) будут увеличены на единицу при нажатии.