Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо знайомство з об’єктом document у JavaScript, а також з його методами і властивостями, що дозволяють вибирати елементи верстки в документі і маніпулювати вибраними елементами.

Отже, в попередній статті ми з вами познайомилися з додатковими методами, що дозволяють проводити досить гнучку вибірку елементів документа. У цій статті ми попрацюємо з властивостями, які дозволяють отримувати контент вибраних елементів, а також змінювати вміст цих елементів.

Перше корисна властивість, яке ви можете використати часто на практиці — властивість innerHTML. innerHTML дозволяє отримати вміст елемента або ж замінити його. Щоб було зрозуміліше, наведемо приклад. Так ми отримаємо вміст заголовків H1:

var elem = document.getElementById(‘h1’);
var content = elem.innerHTML;
console.log(content);

Чи отримаємо вміст всього блоку:

var elem = document.getElementById(‘container1’);
var content = elem.innerHTML;
console.log(content);

Відповідно, при необхідності ми можемо змінити отриманий рядок. Ну і, як зазначалося вище, властивість innerHTML дозволяє записувати новий вміст вибраного елемента, спробуємо:

var elem = document.getElementById(‘container1’);
var content = elem.innerHTML = ‘

Новий заголовок

\n

Нова рядок

‘;
console.log(content);

Як бачимо, ми повністю переписали вміст блоку, додавши за допомогою властивості innerHTML новий заголовок і параграф.

Давайте познайомимося з ще однією властивістю — textContent. Якщо innerHTML отримує весь вміст елемента, включаючи теги і контент, то властивість textContent дозволяє отримати лише контент, без тегів. Перевіримо:

var elem = document.getElementById(‘container1’);
var content = elem.textContent;
console.log(content);

Як і очікувалося, всі теги були вирізані і ми отримали чистий контент блоку. Ну і, само собою, ми можемо переписати текст елемента, присвоївши властивості textContent елемента нове значення:

var elem = document.getElementById(‘h1’);
var content = elem.textContent = ‘Новий заголовок’;
console.log(content);

На цьому у мене все. Якщо ви хочете більше дізнатися про JavaScript, тоді рекомендую звернути свою увагу на уроки по JavaScript і окремий курс по мові JavaScript. Удачі!