Как получить текст из div js

Node.textContent

Позволяет задавать или получать текстовое содержимое элемента и его потомков.

Синтаксис

var text = element.textContent; element.textContent = "Это просто текст";

Описание

• textContent возвращает null, если узел является документом (en-US), типом документа, или его описанием. Для получения всего текста и CDATA-данных во всём документе можно использовать document.documentElement.textContent .
• Если узел является CDATA, комментарием, инструкцией, или текстовым элементом, textContent возвращает текст внутри узла в виде строки (т.н. nodeValue (en-US)).
• Для узлов других типов textContent возвращает конкатенацию свойств textContent всех дочерних узлов, исключая комментарии и строки кода. Если узел не имеет дочерних узлов, будет возвращена пустая строка.
• Установка данного значения удаляет все дочерние узлы и заменяет их единичным текстовым узлом с указанным значением.

Отличие от innerText

element.innerText был введён Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:

• textContent получает содержимое всех элементов, включая и , тогда как innerText этого не делает.
• innerText умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как textContent этого не делает.
• Метод innerText позволяет получить CSS, а textContent — нет.

Отличие от innerHTML

innerHTML , как можно понять из его названия, возвращает HTML. Довольно часто innerHTML используется для получения или записи текста в элемент. Тем не менее, вместо него желательно использовать textContent : этот метод потребляет гораздо меньше ресурсов, так как текст парсится как текст, а не HTML. Кроме того, это защищает от XSS атак.

Пример

// Дан следующий фрагмент: // 
Это — просто текст // Достаём текстовое содержимое: var text = document.getElementById("block").textContent; // В переменной |text| находится: "Это — просто текст". // Меняем текст: document.getElementById("block").textContent = "Это — просто текст"; // Теперь наш фрагмент выглядит так: // 
Это — просто текст 

Совместимость с браузерами

BCD tables only load in the browser

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

Смотрите также

• Подробнее о различиях innerText и textContent (пост в блоге)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

.inner Text

Читаем весь текст во вложенных элементах или записываем свой.

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

Открыть/закрыть навигацию по статье

Обновлено 6 октября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Аналогичной функциональностью обладает свойство text Content , но он возвращает содержимое всех дочерних элементов, даже скрытых:

Пример

Скопировать ссылку «Пример» Скопировано

   Имя  Submit  form> label for='name'>Имяlabel> input type="text" id="name"> button type="submit" id="submit">Submitbutton> form>    Скопировать Скопировано Не удалось скопировать   

 const form = document.querySelector('form')const button = document.getElementById('submit') console.log(form.innerText)// "ИмяSubmit" button.innerText = 'Done!'console.log(button)// Done const form = document.querySelector('form') const button = document.getElementById('submit') console.log(form.innerText) // "ИмяSubmit" button.innerText = 'Done!' console.log(button) // Done    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Считывание и изменение текстового содержимого – довольно распространённая задача. inner Text позволяет считывать содержимое элемента и всего потомков, но с несколькими исключениями:

• не считывается содержимое тегов и ;
• не считывается содержимое скрытых элементов.

Свойство может изменять только текстовое содержимое элемента, если попытаться присвоить строку с HTML, она вставится как текст и не превратится в реальные DOM-элементы. Чтобы HTML в строке сработал, используйте inner H T M L .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Свойство inner Text работает и как геттер, и как сеттер — обращение к свойству вернёт текстовое содержимое элементов и его потомков, а установка нового значения изменит все текстовое содержимое элемента.

Например, мы хотим изменить текст в блоке после окончания загрузки:

   Loading.  div id="loading-status"> Loading. div>    Скопировать Скопировано Не удалось скопировать   

 const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Data loaded!' const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Data loaded!'    Скопировать Скопировано Не удалось скопировать   

В результате в браузере будет отображаться следующий HTML:

   Data loaded!  div id="loading-status"> Data loaded! div>    Скопировать Скопировано Не удалось скопировать   

Установка нового текста с помощью inner Text полностью удалит все старое содержимое и запишет новое текстовое значение. Если внутри элемента были другие вложенные потомки, то все они удалятся.

Предположим, что в блоке статуса загрузки был ещё элемент отображающий иконку-лоадер.

   Loading.  div id="loading-status"> div class="fancy-loader">div> Loading. div>    Скопировать Скопировано Не удалось скопировать   

Установка нового значения в inner Text полностью удалит все предыдущее содержимое и перезапишет его новым текстом.

 const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Error occurred!' const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Error occurred!'    Скопировать Скопировано Не удалось скопировать   

После выполнения кода, внутри блока останется только текст:

   Error occurred!  div id="loading-status"> Error occurred! div>    Скопировать Скопировано Не удалось скопировать   

.text Content

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

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

Открыть/закрыть навигацию по статье

Обновлено 26 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

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

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

Пример

Скопировать ссылку «Пример» Скопировано

   
Заголовок 
И параграф полезного текста  section> h1>Заголовокh1> p>И параграф полезного текстаp> section>    Скопировать Скопировано Не удалось скопировать   

Обращение к свойству text Content тега весь текст внутри элемента:

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

Как понять

Скопировать ссылку «Как понять» Скопировано

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

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

   
Заголовок 
Параграф 
Второй параграф  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) // "ЗаголовокПараграфВторой параграф" // Так как слова не содержат пробелов, то и в итоговой строке между словами их тоже не будет    Скопировать Скопировано Не удалось скопировать   

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

Установка нового текста с помощью text Content полностью удалит всё старое содержимое и запишет новое текстовое значение. Если внутри элемента были другие вложенные потомки, то все они удалятся.

   
Заголовок 
Параграф 
Второй параграф  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 с одним классом или айди?

пробовал через document.getElementsByClassName . inner.HTML но оно ничего мне не вернуло. Подскажите, пожалуйста, как можно вывести это все дело.

• Вопрос задан более трёх лет назад
• 266 просмотров

Комментировать

Решения вопроса 1

Павел Корнилов @KorniloFF Куратор тега JavaScript

Работаю по font-end / JS

[. document.getElementsByClassName('classname')].reduce((acc, cur)=>acc+=cur.textContent, '');

Ответ написан более трёх лет назад