.inner Text
Читаем весь текст во вложенных элементах или записываем свой.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 6 октября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство inner Text позволяет считывать или задавать текстовое содержимое элемента. При считывании текста с элемента будет возвращена строка с текстовым содержимым всех вложенных дочерних элементов. Не будет считываться только содержимое скрытых с помощью CSS элементов, а так же содержимое тегов и .
Аналогичной функциональностью обладает свойство text Content , но он возвращает содержимое всех дочерних элементов, даже скрытых:
Пример
Скопировать ссылку «Пример» Скопировано
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)//const form = document.querySelector('form') const button = document.getElementById('submit') console.log(form.innerText) // "ИмяSubmit" button.innerText = 'Done!' console.log(button) //
Как понять
Скопировать ссылку «Как понять» Скопировано
Считывание и изменение текстового содержимого – довольно распространённая задача. 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>
Node.innerText
Node.innerText — это свойство, позволяющее задавать или получать текстовое содержимое элемента и его потомков. В качестве геттера, свойство приближается к тексту, который пользователь получит, если он выделит содержимое элемента курсором, затем копирует его в буфер обмена.
Изначально, данное поведение было представлено Internet Explorer, и было формально специализированно в стандарте HTML в 2016 после того, как было адаптировано всеми ведущими браузерами.
Node.textContent — это альтернативное свойство, которое имеет ряд отличий:
- textContent получает содержимое всех элементов, включая и , тогда как innerText этого не делает.
- innerText умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как textContent этого не делает.
- Метод innerText позволяет получить CSS, а textContent — нет.
Спецификация
| Specification |
|---|
| HTML Standard # the-innertext-idl-attribute |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- HTMLElement.outerText
- Element.innerHTML
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.
Получение и установка контента элементам в JavaScript
На этом уроке мы рассмотрим свойства, предназначенные для работы с текстовым содержимым элемента ( textContent , innerText , outerText ) и свойства, предназначенные для работы с HTML содержимым элемента ( innerHTML , outerHTML ).
Свойство textContent и как оно работает
textContent – это свойство, которое предназначено для работы с текстовым контентом элемента. Оно позволяет его как получить (включая текстовое содержимое всего его потомков), так и установить.
JavaScript
// $elem – некоторый DOM-элемент // получим текстовый контент $elem const text = $elem.textContent; // установим текстовый контент $elem: $elem.textContent = 'Некоторый текст. ';Примеры с textContent
1. При получении текста элемента, содержащего один текстовый узел, textContent возвратит текст, находящийся внутри этого текстового узла.
Некоторый текст
2. Для элемента, который содержит множество других узлов, textContent вернёт конкатенацию (сложение) текстов всех его текстовых узлов.
Внимание! Это очень важный текст. В этом примере текстовые узлы обозначены цифрами. textContent вернёт сложение текстов этих текстовых узлов.
3. При получении textContent у document , оно возвратит null :
JavaScript
const text = document.textContent; // nullПри установке элементу текстового содержимого, textContent удалит всего его узлы (при их наличии), и добавит в него один текстовый узел, содержащий указанный текст.
4. Например, установим элементу #message новое текстовое содержимое:
Внимание! Это очень важный текст.
После установки $elem текстового контента, он будет выглядеть следующим образом:
5. Например, создадим элемент « div.alert », вставим в него некоторый текст и добавим его на страницу перед закрывающим тегом body :
JavaScript
// создадим элемент const $alert = document.createElement('div'); // добавим к $alert класс alert $alert.className = 'alert'; // установим $alert текстовый контент $alert.textContent = 'Некоторый текст. '; // вставим на страницу перед
