Узел: свойство textContent

Свойство textContent интерфейса Node представляет собой текстовое содержимое узла и его потомков.

Строка или null. Его значение зависит от ситуации:

• Если узел является document или документом типа, textContent возвращает null.

  Примечание: Чтобы получить все текст и данные CDATA для всего документа, используйте document.documentElement.textContent.

• Если узел является разделом CDATA, комментарием, инструкцией обработки или узлом текста, textContent возвращает или устанавливает текст внутри узла, т. е., Node.nodeValue.

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

Не путайте различия между Node.textContent и HTMLElement.innerText. Несмотря на то, что имена кажутся похожими, существуют важные различия:

• textContent получает содержимое всех элементов, включая <script> и <style> элементы. В отличие от этого, innerText отображает только элементы, "читаемые человеком".

• textContent возвращает каждый элемент в узле. В отличие от этого, innerText учитывает стили и не вернёт текст "скрытых" элементов.

  • Кроме того, так как innerText учитывает стили CSS, чтение значения innerText вызывает перерасчёт, чтобы гарантировать актуальность вычисленных стилей. (Перерасчёты могут быть вычислительно дорогими, и их следует избегать, когда это возможно.)

Element.innerHTML возвращает HTML, как подсказывает его название. Иногда люди используют innerHTML для извлечения или записи текста внутри элемента, но textContent обладает лучшей производительностью, потому что его значение не анализируется как HTML.

Кроме того, использование textContent может предотвратить атаки XSS.

Начните с этого фрагмента HTML.

<div id="divA">This is <span>some</span> text!</div>

Вы можете использовать textContent для получения текстового содержимого элемента:

let text = document.getElementById("divA").textContent;
// The text variable is now: 'This is some text!'

Если вы предпочитаете установить текстовое содержимое элемента, вы можете сделать так:

document.getElementById("divA").textContent = "This text is different!";
// The HTML for divA is now:
// <div id="divA">This text is different!</div>

• HTMLElement.innerText
• Element.innerHTML
• Подробнее о различиях между innerText и textContent (статья в блоге)