На этом уроке мы рассмотрим свойства, предназначенные для работы с текстовым содержимым элемента (textContent, innerText, outerText) и свойства, предназначенные для работы с HTML содержимым элемента (innerHTML, outerHTML).

Свойство textContent и как оно работает

textContent – это свойство, посредством которого мы можем установить или получить текстовый контент элемента и его потомков.

Синтаксис:

// $elem – некоторый DOM-элемент

// получим текстовый контент $elem
const text = $elem.textContent;
// установим текстовый контент $elem:
$elem.textContent = 'Некоторый текст...';

Использование textContent для получения текста элемента

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

Javascript - получить текстовое содержимое элемента, содержащего один текстовый узел

Пример:

<p id="some-paragraph">Некоторый текст</p>

<script>
  const $elem = document.querySelector('#some-paragraph');
  const text = $elem.textContent; // "Некоторый текст"
</script>

Для элемента, который содержит множество других узлов, textContent возвращает конкатенацию (сложение) текстов всех его текстовых узлов.

Javascript - свойство textContent

Пример:

<div id="#message">Внимание! <p>Это <strong>очень важный текст.</strong></p><script>alert('А это очень важное сообщение!');</script>

<script>
  const $elem = document.querySelector('#message');
  const text = $elem.textContent;
</script>

textContent возвращает null для document:

const text = document.textContent; // null

Использование textContent для установки текста элементу

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

Javascript - установить элементу текстовое содержимое с помощью свойства textContent JavaScript - работа со свойством textContent

Например, изменить текстовый контент элемента р с id="myP":

document.getElementById("myP").textContent = "Текст элемента р изменён";

Например, получить текстовый контент элемента ul с id="myList":

var myList = document.getElementById("myList").textContent;
console.log(myList);

Если присвоить textContent строку, содержащую HTML код, то символы < и > будут заменены соответственно на &lt; и &gt;.

$elem.textContent = '<p>...</p>';
const text = $elem.textContent; // "&lt;p>...&lt;/p>"

innerText и outerText

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

Но innerText в отличие от textContent как бы копирует текст, отображаемый этим элементом в браузере. Он учитывает стили, применённые к элементу (отображается элемент или нет). Когда элемент скрыт, innerText не включает его текстовый контент в возвращаемые данные.

Кроме этого, innerText не добавляет в возвращаемый результат содержимое style и script.

При установке элементу текстового контента, innerText также как textContent удаляет все имеющиеся в нём узлы и создаёт новый текстовый узел с указанным содержимым.

// получим текстовый контент $elem
const text = $elem.innerText;
// зададим $elem текстовый контент
$elem.innerText = 'Текст...';
Javascript - свойство innerText

Ещё в DOM API у элементов имеется свойство outerText. Оно возвращает текстовое содержимое элемента аналогично свойству innerText.

// получим текстовый контент $elem
const text = $elem.outerText;
// установим $elem текстовый контент
$elem.outerText = 'Текстовый контент...';

Его отличие от innerText только в том, что outerText при установки элементу текстового контента удаляет не только всё его содержимое, но и сам этот элемент и помещает на этом месте новый текстовый узел с заданным текстом.

JavaScript - работа со свойствами innerText и outerText

Например, получить и изменить текстовый контент элемента, имеющего id="myP", с помощью свойства innerText:

var myP = document.getElementById("myP");
//выведем в консоль текстовый контент элемента
console.log(myP.innerText);
//изменим текстовый контент элемента
myP.innerText = "Новая строка";

innerHTML и outerHTML

innerHTML устанавливает или возвращает HTML разметку этого элемента (его HTML контент).

// получим HTML содержимое $elem
const html = $elem.innerHTML;

// установим $elem новый HTML
$elem.innerHTML = '<div>...<div>';
Javascript - свойства innerHTML и outerHTML Javascript - работа со свойствами innerHTML и outerHTML

Например, получить и изменить HTML контент элемента р с id="myP":

var myP = document.getElementById("myP");
//получить HTML содержимое элемента, имеющего id="myP"
myP.innerHTML;
//изменить HTML содержимое элемента, имеющего id="myP"
myP.innerHTML = "<em>Что-то новое</em>";

Например, удалить HTML контент элемента p, имеющего id="demo":

document.getElementById("demo").innerHTML = "";

Задание HTML содержимого элементу с помощью innerHTML всегда сопровождается удалением его контента и установкой ему новой HTML разметки, но основе указанной строки, которая была разобрана внутренним парсером браузера как HTML.

Начинающие веб-разработчики при написании такого кода полагают что он добавит только указанную HTML разметку в конец содержимого $someElem:

$someElem.innerHTML += '<div>...</div>';

Но это не совсем так. Этот код выполняет следующее:

  1. получает текущее содержимое $someElem и добавляет к нему <div>...</div>;
  2. очищает всё что есть в $someElem;
  3. устанавливает ему полученный HTML.

Эквивалентная запись кода, приведённого выше:

$someElem.innerHTML += '<div>...</div>';

Таким образом, мы не просто добавляем некоторый HTML в конец элемента, а полностью переустанавливаем его. Выполнение такого кода обычно сопровождается «миганием».

Поэтому, в ситуациях, когда вам нужно просто добавить фрагмент HTML разметки в некоторый элемент лучше воспользоваться для этих случаев специальным методом таким как insertAdjacentHTML.

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

$elem.innerHTML = '';

Свойство outerHTML устанавливает или возвращает HTML контент, представляющий сам элемент и его дочерние элементы.

Например, получить и изменить HTML контент списка ul, имеющего id="myList":

var myList = document.getElementById("myList");
//получить HTML список
myList.outerHTML;
//заменить HTML список на новый
myList.outerHTML = "<ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>";

Задания

  1. Напишите сценарий, который изменит содержимое всех элементов p в документе.
  2. Напишите сценарий, который заменит HTML содержимое элемента body на другое. Условием для запуска сценария является время, равное 5 секундам, которое прошло с момента полной загрузки страницы.