Свойства textContent и innerText — Доступ и изменение текста узла
Свойства textContent и innerText позволяют получить доступ к тексту узла веб-документа и внести в него необходимые изменения. Рассмотрим их подробнее.
textContent и innerText — Доступ к тексту узла
Итак, свойства textContent и innerText в JavaScript позволяют получить текст выбранного узла и всех его дочерних элементов.
Текст, например, можно вывести на экран или использовать его как-то иначе.
Свойства похожи, но innerText не работает в ранних версиях Firefox .
Фрагмент кода
«name» > Заголовок h1
document . write ( «Результат в Javascript:
«);
var any = document . getElementById ( ‘name’ ); /* Выбираем тег h1 по id */
/* Далее получаем доступ и выводим на экран текст тега h1 и текст его дочернего узла — параграфа — тег p */
document . write ( any . innerText + «
» );
document . write ( any . textContent + «
» );
Комментарии к примеру.
Выбираем по id заголовок h1 ;
Поочередно при помощи свойств innerText и textContent выводим на экран текст заголовка;
textContent и innerText — Замена текста узла
Свойства innerText и textContent не только возвращают, но и позволяют заменить текст выбранного узла.
При замене текста основного узла, текст дочерних узлов не будет отображаться на веб-странице.
Фрагмент кода
«name» > Заголовок h1
document . write ( «Результат в Javascript:
«);
var any = document . getElementById ( ‘name’ ); /* Выбираем тег h1 по id */
/* Изменение текста выбранного узла на указанный */
document . write ( any . innerText = «Меняем заголовок» );
Комментарии к примеру.
Выбираем по id заголовок h1 ;
При помощи свойства innerText меняем текст в выбранном узле;
Свойство textContent работает аналогично.
Читайте также.
Свойство length — число элементов массива
Объект Window и свойство window
Вставка текста и html-кода — innerHTML, textContent и insertAdjacentHTML
Свойство innerHTML — Получение и замена кода узла
Получение и установка контента элементам в 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 = 'Некоторый текст. '; // вставим на страницу перед document.body.appendChild($alert);
6. Если присвоить textContent строку, содержащую HTML код, то символы < и >будут заменены соответственно на < и > .
JavaScript
$elem.textContent = '.
'; const text = $elem.textContent; // "<p>. </p>"
innerText, outerText и их отличие от textContent
innerText также как textContent используется для извлечения текста из элементов.
Но innerText в отличие от textContent как бы копирует текст, отображаемый этим элементом в браузере . Он учитывает стили, применённые к элементу (отображается элемент или нет). Когда элемент скрыт, innerText не включает его текстовый контент в возвращаемые данные.
Кроме этого, innerText не добавляет в возвращаемый результат содержимое style и script .
При установке элементу текстового контента, innerText также как textContent удаляет все имеющиеся в нём узлы и создаёт новый текстовый узел с указанным содержимым.
Синтаксис свойства innerText :
JavaScript
// получим текстовый контент $elem const text = $elem.innerText; // зададим $elem текстовый контент $elem.innerText = 'Новый текст. ';
Пример , в котором показана разница между innerText и textContent :
Внимание! Это очень важный текст.
Из примера видно, что innerText не включает в возвращаемые данные контент элемента script .
В этом примере мы ещё дополнительно удалим отображение элемента span из документа, т.е. установим ему « display: none »:
Внимание! Это очень важный текст.
Таким образом innerText учитывает стили элементов, и возвращает только текст отображаемый этим элементом в браузере.
outerText
Ещё в DOM API у элементов имеется свойство outerText . Оно возвращает текстовое содержимое элемента аналогично свойству innerText .
Синтаксис свойства outerText :
JavaScript
// получим текстовый контент $elem const text = $elem.outerText; // установим $elem текстовый контент $elem.outerText = 'Текстовый контент. ';
Его отличие от innerText только в том, что outerText при установки элементу текстового контента удаляет не только всё его содержимое, но и сам этот элемент и помещает на этом месте новый текстовый узел с заданным текстом.
Например , заменим все элементы img на текст ‘Здесь было изображение’ :
JavaScript
. .
innerHTML и outerHTML
innerHTML предназначен для установки или получения HTML разметки элемента.
JavaScript
// получим HTML содержимое $elem const html = $elem.innerHTML; // установим $elem новый HTML $elem.innerHTML = '. ';
Например, установим элементу ul#list новое HTML содержимое:
JavaScript
Пример, в котором получим HTML разметку некоторого элемента:
JavaScript
Я люблю JavaScript! Он позволяет сделать что угодно со страницей.
Задание HTML содержимого элементу с помощью innerHTML всегда сопровождается удалением его контента и установкой ему новой HTML разметки, но основе указанной строки, которая была разобрана внутренним парсером браузера как HTML.
Начинающие веб-разработчики при написании такого кода полагают что он добавит только указанную HTML разметку в конец содержимого $someElem :
JavaScript
$someElem.innerHTML += '. ';
Но на самом деле это не так. Этот код выполняет следующее:
- получает текущее содержимое $someElem , т.е. HTML-строку, к которой прибавляет ещё одну строку
.
;
- очищает всё что есть в $someElem ;
- устанавливает $someElem HTML, полученный в результате разбора результирующей строки.
Эквивалентная запись кода, приведённого выше:
JavaScript
let html = $someElem.innerHTML; html = html + '. '; $someElem.innerHTML = html;
Таким образом, используя такую запись мы не просто добавляем некоторый HTML в конец элемента, а полностью переустанавливаем его. Выполнение такого кода обычно сопровождается «миганием».
Поэтому, в ситуациях, когда вам нужно просто добавить некоторый фрагмент HTML разметки в некоторый элемент лучше воспользоваться, например, методом insertAdjacentHTML .
Пример использования innerHTML для очистки содержимого элемента:
JavaScript
$elem.innerHTML = '';
Например, получить и изменить HTML контент элемента р с id=»myP» :
JavaScript
var myP = document.getElementById("myP"); //получить HTML содержимое элемента, имеющего myP.innerHTML; //изменить HTML содержимое элемента, имеющего myP.innerHTML = "Что-то новое";
Например, удалить HTML контент элемента p , имеющего id=»demo» :
JavaScript
document.getElementById("demo").innerHTML = "";
outerHTML
Свойство outerHTML устанавливает или возвращает HTML контент, представляющий сам элемент и его дочерние элементы.
Например, получить и изменить HTML контент списка ul , имеющего id=»myList» :
JavaScript
- HTML
- CSS
- JavaScript
Задания
- Напишите сценарий, который изменит содержимое всех элементов p в документе.
- Напишите сценарий, который заменит HTML содержимое элемента body на другое. Условием для запуска сценария является время, равное 5 секундам, которое прошло с момента полной загрузки страницы.
Свойство innerText
Дополнительные примеры «Попробуй сам» приведены ниже.
Определение и использование
Свойство innerText задает или возвращает текстовое содержимое указанного узла и всех его потомков.
Если вы задаете свойство innerText, все дочерние узлы удаляются и заменяются одним текстовым узлом, содержащим указанную строку.
Примечание: Это свойство аналогично свойству textContent, однако есть некоторые различия:
- Свойство textContent возвращает текстовое содержимое всех элементов, в то время как свойство innerText возвращает содержимое всех элементов, за исключением для элементов и .
- Свойство innerText не вернет текст элементов, скрытых с помощью CSS (textContent вернет). Попробовать »
Совет: Чтобы задать или вернуть HTML-содержимое элемента, используйте свойство innerHTML.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство
innerText
4.0
10.0
45.0
3.0
9.6
Синтаксис
Возвращает текстовое содержимое узла:
node.innerText
Задает текстовое содержимое узла:
node.innerText = text
Свойство значений
Значение
Тип
Описание
text
String
Задает текстовое содержимое указанного узла
Технические детали
Возвращает значение
Строка, представляющая «визуализированное» текстовое содержимое узла и всех его потомков
Ещё примеры
Пример
Этот пример демонстрирует некоторые различия между innerText, innerHTML и textContent:
function getInnerText() alert(document.getElementById(«demo»).innerText)
>
function getHTML() alert(document.getElementById(«demo»).innerHTML)
>
function getTextContent() alert(document.getElementById(«demo»).textContent)
>
Получите содержимое элемента
выше с указанными свойствами:
innerText возвращает: «Этот элемент имеет дополнительный интервал и содержит элемент span.»
innerHTML возвращает: » Этот элемент имеет дополнительный интервал и содержит элемент span.»
textContent возвращает: » Этот элемент имеет дополнительный интервал и содержит элемент span.»
Свойство innerText возвращает только текст, без пробелов и тегов внутренних элементов.
Свойство innerHTML возвращает текст, включая все интервалы и теги внутренних элементов.
Свойство textContent возвращает текст с интервалом, но без тегов внутренних элементов.
.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>