В этой статье мы с вами продолжим знакомство с объектом document в JavaScript, а также с его методами и свойствами, позволяющими выбирать элементы верстки в документе и манипулировать выбранными элементами.
Итак, в предыдущей статье мы с вами познакомились с дополнительными методами, позволяющими производить достаточно гибкую выборку элементов документа. В этой статье мы поработаем со свойствами, которые позволяют получать контент выбранных элементов, а также изменять содержимое этих элементов.
Первое полезное свойство, которое вы можете использовать часто на практике — свойство innerHTML. innerHTML позволяет получить содержимое элемента или же перезаписать его. Чтобы было понятнее, приведем пример. Так мы получим содержимое заголовка H1:
01.<div class="container" id="container1">02.<div class="row" id="row">03.<div class="col-md-12" id="col">04.<h1 id="h1">Hello, world!</h1>05.<p class="yellow">Yellow 1</p>06.<p class="grey">Grey</p>07.<p class="yellow">Yellow 2</p>08.</div>09.</div>10.</div>1.var elem = document.getElementById('h1');2.var content = elem.innerHTML;3.console.log(content);
Или получим содержимое всего блока:
1.var elem = document.getElementById('container1');2.var content = elem.innerHTML;3.console.log(content);
Соответственно, при необходимости мы можем изменить полученную строку. Ну и, как отмечалось выше, свойство innerHTML позволяет записывать новое содержимое для выбранного элемента, попробуем:
1.var elem = document.getElementById('container1');2.var content = elem.innerHTML = '<h1>Новый заголовок</h1>\n<p>Новая строка</p>';3.console.log(content);
Как видим, мы полностью переписали содержимое блока, добавив с помощью свойства innerHTML новый заголовок и параграф.
Давайте познакомимся с еще одним свойством — textContent. Если innerHTML получает все содержимое элемента, включая теги и контент, то свойство textContent позволяет получить лишь контент, без тегов. Проверим:
1.var elem = document.getElementById('container1');2.var content = elem.textContent;3.console.log(content);
Как и ожидалось, все теги были вырезаны и мы получили чистый контент блока. Ну и, само собой, мы можем перезаписать текст элемента, присвоив свойству textContent элемента новое значение:
1.var elem = document.getElementById('h1');2.var content = elem.textContent = 'Новый заголовок';3.console.log(content);
Источник: https://webformyself.com/obekt-document-v-javascript-metody-i-svojstva-obekta-document-chast-3/