JavaScript - DOM: свойства textContent, innerHTML и др.

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

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

Javascript - свойство textContent

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

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

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

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

JavaScript - работа со свойством textContent

Синтаксис:

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

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

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

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

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

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

Предупреждение: Свойство innerText в некоторых браузерах может работать не так, как должно. Например, может возвращать значение аналогичное свойству contentText.

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

Javascript - свойство innerText

Синтаксис:

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

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

Синтаксис:

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

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

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

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

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

Javascript - свойства innerHTML и outerHTML

Синтаксис:

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

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 = "";

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


   JavaScript и jQuery 0    4712 0

Комментарии (2)

  1. Иван # 0
    Здравствуйте! Вывел отдельные блоки из index.html в отдельный script.js
    НО блоки 2 одновременно не выводятся на экран. Что-то напутал скорее всего в синтаксисе JS

    
    
    $(document).ready(function() {
    	
    
    	var waypointsvg = new Waypoint({
    
    		element: $(".section_5"),
    		handler: function(dir) {
    			
    			if (dir === "down") {
    
    				$(".section_5 .tc-item").each(function(index) {
    					var ths = $(this);
    					setTimeout(function() {
    						var myAnimation = new DrawFillSVG({
    							elementId: "tc-svg-" + index
    						});
    						ths.children(".tc-content").addClass("tc-content-on");
    					}, 500*index);
    				});
    
    			};
    			this.destroy();
    		},
    		offset: '35%'
    	});
    });
        
    var s="<p>Здесь расположен текст, вынесенный в JS</p>";
    document.getElementById("js-123").innerHTML=s;
    
    var m="<img src='img/fire.png' class='img-responsive' alt='BlaBla'>";
    document.getElementById("js-456").innerHTML=m;
    
    

    В index. html:

    
    <span id="js-456"><span>
    <span id="js-123"><span>
    
    
    
    1. Александр Мальцев # 0
      Здравствуйте, у Вас элементы span не закрыты:
        <span id="js-456"></span>
        <span id="js-123"></span>
      

    Вы должны авторизоваться, чтобы оставлять комментарии.