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

Свойство textContent

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

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

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

Синтаксис:

//Получить текстовый контент узла (node):
node.textContent
//Установить узлу текстовый контент "Text":
node.textContent = "Text"

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

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

Свойства innerText и outerText

В отличие от свойства textContent, данное свойство (innerText) "как бы копирует" текст в веб-браузере, который отображается HTML кодом, расположенным между открывающим и закрывающим тегом того элемента, для которого вызывается данное свойство. Т.е. свойство innerHTML учитывает стили элементов, а именно отображается элемент или нет, а, следовательно, и его содержимое в браузере. Кроме этого данное свойство также ещё учитывает в каком элементе находится узел, содержащий текст. Например, содержимое элемента script данное свойство не учитывает, т.к. оно не отображается в браузере, а является сценарием, которое выполняется при определённых условиях.

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

Синтаксис:

//Получить текстовый контент элемента:
HTMLElement.innerText;
//Установить элементу текстовый контент "Text":
HTMLElement.innerText = "Text"

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

Синтаксис:

//Получить текстовый контент элемента:
HTMLElement.outerText;
//Заменить элемент на текстовый контент "Text":
HTMLElement.outerText = "Text"

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

Свойства innerHTML и outerHTML

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

Синтаксис:

//получить HTML элемента
НТМLElementObject.innerHTML
//установить элементу код HTML
HTMLElementObject.innerHTML = HTML;

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

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

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

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 секундам, которое прошло с момента полной загрузки страницы.