/ ↲
    Расширенный поиск

    JavaScript

    .textContent

    Время чтения: меньше 5 мин

    1. Кратко
    2. Пример
    3. Как понять
    4. Как пишется

    Кратко

    Свойство Element.textContent позволяет считывать или задавать текстовое содержимое элемента. Обращение к свойству вернёт строку, которая будет состоять из текстового содержимого всех вложенных элементов, даже если они скрыты с помощью CSS и не видны на экране.

    Аналогичной функциональностью, но с некоторыми ограничениями обладает свойство Element.innerText. Оно работает так же, но не включает в себя скрытые элементы.

    Пример

            
          
          <section>  <h1>Заголовок</h1>  <p>И параграф полезного текста</p></section>
          <section>
  <h1>Заголовок</h1>

  <p>И параграф полезного текста</p>
</section>

        
        
          
        
      
            
          
          const section = document.querySelector('section')const heading = document.querySelector('h1')console.log(section.textContent) // Выведет весь текст внутри элемента: "ЗаголовокИ параграф полезного текста"heading.textContent = 'Новый заголовок' // В результате будет: <h1>Новый заголовок</h1>
          const section = document.querySelector('section')
const heading = document.querySelector('h1')

console.log(section.textContent) // Выведет весь текст внутри элемента: "ЗаголовокИ параграф полезного текста"

heading.textContent = 'Новый заголовок' // В результате будет: <h1>Новый заголовок</h1>
    Открыть демо в новой вкладке

    Как понять

    Для считывания и изменения текстового содержимого браузер предоставляет свойства Element.innerText и Element.textContent. Запись значения работает идентично для обоих. Значение, которое возвращается при чтении свойств отличается. textContent возвращает строку с содержимым всех вложенных потомков, вне зависимости от того, скрыты они или нет. innerText же возвращает содержимое только видимых элементов.

    Свойство может изменить только текстовое содержимое элемента, потому если присвоить строку, содержащую HTML, то она вставится как простой текст и не превратиться в реальные DOM-элементы. Для того чтобы вставлять HTML c помощью строку подойдёт свойство Element.innerHTML.

    Как пишется

    Обращение к свойству Element.textContent вернёт текстовое содержимое элемента. Если внутри элемента находятся дочерние узлы, то результат будет являться конкатенацией вызовов Element.textContent для всех этих узлов.

            
          
          <div>  <h1>Заголовок</h1>  <p>Параграф</p>  <p>Второй параграф</p></div>
          <div>
  <h1>Заголовок</h1>
  <p>Параграф</p>
  <p>Второй параграф</p>
</div>

        
        
          
        
      
            
          
          const element = document.querySelector('div')console.log(element.textContent)// Выведет "ЗаголовокПараграфВторой параграф"// Так как слова не содержат пробелов, то и в итоговой строке между словами их тоже не будет
          const element = document.querySelector('div')

console.log(element.textContent)
// Выведет "ЗаголовокПараграфВторой параграф"
// Так как слова не содержат пробелов, то и в итоговой строке между словами их тоже не будет

    Чтобы изменить текст в элементе нужно присвоить новое значение в свойство Element.textContent.

            
          
          <div>  <h1>Заголовок</h1>  <p>Параграф</p>  <p>Второй параграф</p></div>
          <div>
  <h1>Заголовок</h1>
  <p>Параграф</p>
  <p>Второй параграф</p>
</div>

        
        
          
        
      
            
          
          const element = document.querySelector('div')element.textContent = 'Я буду единственным текстом здесь'
          const element = document.querySelector('div')

element.textContent = 'Я буду единственным текстом здесь'

        
        
          
        
      
            
          
          <!-- Больше никакой иконки внутри, только новый текст --><div>  Я буду единственным текстом здесь</div>
          <!-- Больше никакой иконки внутри, только новый текст -->
<div>
  Я буду единственным текстом здесь
</div>