.textContent

Считываем и записываем текстовое содержимое элемента.

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

Кратко

Скопировано

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

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

Пример

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

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

        
        
          
        
      

Обращение к свойству textContent тега <section> весь текст внутри элемента:

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

const heading = document.querySelector('h1')
heading.textContent = 'Новый заголовок'
// В результате будет: <h1>Новый заголовок</h1>

        
        
          
        
      
Открыть демо в новой вкладке

Как понять

Скопировано

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

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

Как пишется

Скопировано

Обращение к свойству textContent вернёт текстовое содержимое элемента. Если внутри элемента находятся дочерние узлы, то результат будет являться конкатенацией вызовов 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)
// "ЗаголовокПараграфВторой параграф"
// Так как слова не содержат пробелов, то и в итоговой строке между словами их тоже не будет

        
        
          
        
      

Чтобы изменить текст в элементе нужно присвоить новое значение в свойство 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>