Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо знайомство з об’єктом document у JavaScript, а також з його методами і властивостями, що дозволяють вибирати елементи верстки в документі і маніпулювати вибраними елементами.
Отже, в попередній статті ми з вами познайомилися з додатковими методами, що дозволяють проводити досить гнучку вибірку елементів документа. У цій статті ми попрацюємо з властивостями, які дозволяють отримувати контент вибраних елементів, а також змінювати вміст цих елементів.
Перше корисна властивість, яке ви можете використати часто на практиці — властивість innerHTML. innerHTML дозволяє отримати вміст елемента або ж замінити його. Щоб було зрозуміліше, наведемо приклад. Так ми отримаємо вміст заголовків H1:
Hello, world!
Yellow 1
Grey
Yellow 2
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. Удачі!