menumenu_open xhtml.ru
Javascript
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Загрузка...

Node.textContent и Element.innerText для получения и установки текста

Javascript предоставляет два свойства, которые можно использовать для получения и установки текста в HTML-элементе: Node.textContent и Element.innerText.

На первый взгляд кажется, что они делают одно и то же, но между ними есть несколько тонких и важных различий. Далее посмотрим, что они делают, чем похожи и чем отличаются.

Сходство Node.textContent и Element.innerText

Допустим, в HTML-коде WEB-страницы есть такой элемент.

<p id="sandwich">I love a good tuna sandwich!</p>

Оба свойства Node.textContent, и Element.innerText можно использовать для получения текста из HTML-элемента #sandwich.

let sandwich = document.querySelector('#sandwich');

let text1 = sandwich.textContent;
// возвращает "I love a good tuna sandwich!"

let text2 = sandwich.innerText;
// тоже возвращает "I love a good tuna sandwich!"

Если внутри элемента встретится HTML-разметка, оба свойства будут ее игнорировать.

<p id="sandwich">I love a good <strong>tuna</strong> sandwich!</p>
let textHTML1 = sandwich.textContent;
// возвращает "I love a good tuna sandwich!"

let textHTML2 = sandwich.innerText;
// тоже возвращает "I love a good tuna sandwich!"

Помимо получения текста, оба свойства могут использоваться для установки текста внутри HTML-элемента.

// Заменить текст в элементе
sandwich.textContent = 'Hello, world!';
// <p id="sandwich">Hello, world!</p>

// или даже добавить с помощью +=
sandwich.innerText += ' And hi, Universe!';
// <p id="sandwich">Hello, world! And hi, Universe!</p>

Отличие Node.textContent и Element.innerText

На первый взгляд, они делают одно и то же. Чем же они различаются?

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

<div class="greeting">
  <style type="text/css">
    p {
      color: green;
    }
  </style>
  <p hidden>This is not rendered.</p>
  <p>Hello world!</p>
</div>

Здесь есть текст внутри style (описание CSS-свойств), абзац текста, который не будет визуализирован (потому что hidden) и абзац обычного видимого на странице текста.

let greeting = document.querySelector('.greeting');

// извлечь текст с помощью textContent
let text1 = greeting.textContent;
// возвращает всё текстовое содержимое
// "p {color: green;}
// This is not rendered.
// Hello world!"

// извлечь текст с помощью innerText
let text2 = greeting.innerText;
// возвращает только визуализированное
// "Hello world!"

The difference between the Node.textContent and Element.innerText properties in vanilla JS.