Пошук уроків, статей та іншого контенту
Змінюватимете текст, HTML-вміст і значення полів безпосередньо через властивості елементів.
JavaScript дає змогу читати й змінювати вміст HTML-елементів без перезавантаження сторінки. Для цього спочатку потрібно отримати потрібний елемент, а потім звернутися до відповідної властивості.
Найчастіше використовують:
textContent — читає або змінює текст;
innerHTML — читає або змінює HTML-код усередині елемента;
value — читає або змінює значення полів форми.
Наприклад, маємо HTML:
<p id="message">Початковий текст</p>Отримати цей елемент можна за допомогою querySelector:
const message = document.querySelector('#message');
console.log(message);Символ # означає пошук елемента за ідентифікатором id.
textContentВластивість textContent використовується для читання або зміни звичайного тексту всередині елемента.
<p id="message">Вітаємо на сторінці!</p>
<script>
const message = document.querySelector('#message');
console.log(message.textContent);
</script>У консолі браузера буде:
Вітаємо на сторінці!Щоб змінити текст, потрібно присвоїти нове значення властивості textContent:
<p id="message">Початковий текст</p>
<script>
const message = document.querySelector('#message');
message.textContent = 'Новий текст';
</script>Після виконання коду абзац міститиме текст Новий текст.
textContent сприймає все присвоєне значення саме як текст. Навіть якщо значення містить HTML-теги, браузер не створює з них елементи:
const message = document.querySelector('#message');
message.textContent = '<strong>Важливе повідомлення</strong>';На сторінці буде показано саме:
<strong>Важливе повідомлення</strong>Це корисно, коли потрібно безпечно вставити текст, отриманий від користувача.
innerHTMLВластивість innerHTML використовується для читання або зміни HTML-вмісту елемента.
<div id="content">
<p>Старий абзац</p>
</div>
<script>
const content = document.querySelector('#content');
content.innerHTML = '<p>Новий <strong>абзац</strong></p>';
</script>Після виконання коду всередині div буде створено абзац із жирним словом.
<div id="content">
<p>Перший абзац</p>
<p>Другий абзац</p>
</div>
<script>
const content = document.querySelector('#content');
console.log(content.innerHTML);
</script>Результатом буде HTML-код, який міститься всередині div.
innerHTMLinnerHTML зручно використовувати, коли потрібно швидко додати кілька HTML-елементів:
const list = document.querySelector('#list');
list.innerHTML = `
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
`;Якщо HTML складається з кількох рядків, часто використовують шаблонні рядки з бектиками:
const title = 'Список технологій';
document.querySelector('#content').innerHTML = `
<h2>${title}</h2>
<p>Вивчаємо веброзробку.</p>
`;innerHTMLНе слід вставляти через innerHTML неперевірені дані, які ввів користувач або отримано із зовнішнього джерела:
const userComment = '<img src="invalid" onerror="alert(\'Небезпечний код\')">';
document.querySelector('#comments').innerHTML = userComment;Таке використання може створити вразливість до XSS-атак. Якщо потрібно показати неперевірене значення як звичайний текст, використовуйте textContent:
document.querySelector('#comments').textContent = userComment;valueДля полів форми значення користувача зберігається у властивості value.
До таких елементів належать:
<input>;
<textarea>;
<select>.
<label>
Ваше ім'я:
<input id="name" type="text" value="Олена">
</label>
<script>
const nameInput = document.querySelector('#name');
console.log(nameInput.value);
</script>У консолі буде виведено:
Олена<input id="email" type="email">
<script>
const emailInput = document.querySelector('#email');
emailInput.value = 'user@example.com';
</script>Після виконання коду поле міститиме адресу user@example.com.
Створимо сторінку, на якій користувач вводить ім’я. Після натискання кнопки сторінка показує привітання.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Привітання</title>
</head>
<body>
<h1 id="title">Привітання</h1>
<label for="name">Ваше ім'я:</label>
<input id="name" type="text" placeholder="Введіть ім'я">
<button id="greetButton" type="button">Привітати</button>
<p id="result"></p>
<script>
const nameInput = document.querySelector('#name');
const greetButton = document.querySelector('#greetButton');
const result = document.querySelector('#result');
greetButton.addEventListener('click', () => {
const name = nameInput.value.trim();
if (name === '') {
result.textContent = 'Будь ласка, введіть ім’я.';
return;
}
result.textContent = `Привіт, ${name}!`;
});
</script>
</body>
</html>Розгляньмо основні частини прикладу:
nameInput.value читає значення поля.
Метод trim() видаляє пробіли на початку та в кінці рядка.
Перевірка name === '' визначає, чи введено ім’я.
result.textContent змінює текст абзацу.
Шаблонний рядок дає змогу вставити значення змінної в текст.
textContent та innerHTMLРозглянемо однакове значення для обох властивостей:
<p id="text-result"></p>
<p id="html-result"></p>
<script>
const textResult = document.querySelector('#text-result');
const htmlResult = document.querySelector('#html-result');
const content = '<strong>Виділений текст</strong>';
textResult.textContent = content;
htmlResult.innerHTML = content;
</script>Результат:
textContent покаже теги як звичайний текст;
innerHTML створить жирний текст.
Отже:
element.textContent = value;вставляє текст, а:
element.innerHTML = value;обробляє значення як HTML-код.
Метод querySelector повертає лише перший знайдений елемент. Щоб отримати всі елементи, можна використати querySelectorAll.
<p class="note">Перший напис</p>
<p class="note">Другий напис</p>
<p class="note">Третій напис</p>
<script>
const notes = document.querySelectorAll('.note');
notes.forEach((note, index) => {
note.textContent = `Напис №${index + 1}`;
});
</script>Метод forEach виконує передану функцію для кожного знайденого елемента.
Якщо скрипт розташований у <head>, HTML-елементи можуть бути ще не створені на момент виконання скрипту. Один зі способів дочекатися завантаження HTML — використати подію DOMContentLoaded:
document.addEventListener('DOMContentLoaded', () => {
const message = document.querySelector('#message');
message.textContent = 'Сторінка завантажена';
});Якщо скрипт розташований перед закривальним тегом </body>, елементи зазвичай уже існують у документі:
<p id="message">Початковий текст</p>
<script>
const message = document.querySelector('#message');
message.textContent = 'Новий текст';
</script>Переконайтеся, що селектор відповідає потрібному елементу:
const message = document.querySelector('#message');Для пошуку за id потрібен символ #, а для пошуку за класом — символ .:
document.querySelector('#title');
document.querySelector('.description');Неправильно:
message.textContent = 'Привіт';
const message = document.querySelector('#message');Спочатку потрібно отримати елемент, а потім змінювати його:
const message = document.querySelector('#message');
message.textContent = 'Привіт';textContent для HTMLЯкщо потрібно створити HTML-елементи, textContent не підійде:
element.textContent = '<strong>Текст</strong>';Цей код покаже теги як текст. Для HTML-вмісту потрібен innerHTML, але значення має бути перевіреним:
element.innerHTML = '<strong>Текст</strong>';innerHTML для введених данихНеперевірені дані безпечніше вставляти через textContent:
result.textContent = userInput;textContentДля input текст не зберігається в textContent:
const input = document.querySelector('#name');
console.log(input.textContent); // Порожній рядок
console.log(input.value); // Значення поляДля полів форми використовуйте value.
textContent читає та змінює звичайний текст елемента.
innerHTML читає та змінює HTML-вміст елемента.
value читає та змінює значення полів форми.
textContent безпечніший для виведення неперевірених даних.
innerHTML зручно використовувати для створення HTML-вмісту, але лише з довіреними даними.
Перед роботою з властивостями потрібно отримати елемент через querySelector або інший метод пошуку.