Пошук уроків, статей та іншого контенту
Змінюватимете текст, атрибути й класи елементів за допомогою DOM API.
Після того як елемент знайдено за допомогою DOM API, його можна змінити: оновити текст, вставити HTML, змінити атрибути або класи.
Розглянемо HTML-код:
<p id="message">Старий текст</p>Щоб змінити текст абзацу, спочатку знайдемо його:
const message = document.querySelector('#message');
message.textContent = 'Новий текст';Властивість textContent замінює весь текстовий вміст елемента.
<p id="status">Статус: очікування</p>
<script>
const status = document.querySelector('#status');
status.textContent = 'Статус: виконано';
</script>Після виконання скрипту текст абзацу стане таким:
Статус: виконаноtextContent також може читати поточний текст:
const currentText = status.textContent;
console.log(currentText);textContent та innerHTMLДля зміни звичайного тексту використовуйте textContent:
message.textContent = '<strong>Важливе повідомлення</strong>';Браузер покаже теги як звичайний текст:
<strong>Важливе повідомлення</strong>Якщо потрібно додати HTML-розмітку, використовуйте innerHTML:
message.innerHTML = '<strong>Важливе повідомлення</strong>';Тоді слово «Важливе повідомлення» буде виділене жирним шрифтом.
innerHTMLinnerHTML зручний, коли потрібно вставити невеликий фрагмент відомої HTML-розмітки:
const card = document.querySelector('#card');
card.innerHTML = `
<h2>Новина</h2>
<p>Новий текст новини.</p>
`;Однак не слід безпосередньо вставляти в innerHTML дані, отримані від користувача або з ненадійного джерела. Це може створити вразливість, пов’язану зі вставкою шкідливого HTML-коду.
Для зовнішніх або користувацьких даних безпечнішим варіантом зазвичай є textContent:
const userName = 'Олена';
const greeting = document.querySelector('#greeting');
greeting.textContent = `Вітаємо, ${userName}!`;HTML-елементи можуть мати атрибути:
<a id="profile-link" href="/profile" title="Відкрити профіль">
Профіль
</a>Для роботи з атрибутами використовують такі методи:
getAttribute() — отримати значення атрибута;
setAttribute() — встановити або змінити атрибут;
hasAttribute() — перевірити наявність атрибута;
removeAttribute() — видалити атрибут.
const profileLink = document.querySelector('#profile-link');
const address = profileLink.getAttribute('href');
console.log(address); // /profileЯкщо атрибуту не існує, getAttribute() повертає null.
const target = profileLink.getAttribute('target');
console.log(target); // nullМетод setAttribute() приймає назву атрибута та його значення:
profileLink.setAttribute('href', '/account');
profileLink.setAttribute('title', 'Відкрити обліковий запис');Тепер HTML-елемент матиме приблизно такий вигляд:
<a
id="profile-link"
href="/account"
title="Відкрити обліковий запис"
>
Профіль
</a>Якщо атрибуту ще не було, setAttribute() створить його:
profileLink.setAttribute('target', '_blank');if (profileLink.hasAttribute('target')) {
console.log('Посилання відкривається в новій вкладці');
}profileLink.removeAttribute('title');Після цього атрибут title зникне з елемента.
Для деяких атрибутів існують зручні властивості DOM.
Наприклад, посилання має властивість href:
const link = document.querySelector('#profile-link');
link.href = '/settings';
console.log(link.href);Поле введення має властивість value:
<input id="name-input" type="text" value="Початкове ім'я">const nameInput = document.querySelector('#name-input');
nameInput.value = 'Нове ім’я';
console.log(nameInput.value);Для прапорця зручно використовувати властивість checked:
<input id="agreement" type="checkbox">const agreement = document.querySelector('#agreement');
agreement.checked = true;Властивості добре підходять для взаємодії з формами та станом елементів. Методи getAttribute() і setAttribute() корисні, коли потрібно безпосередньо працювати з HTML-атрибутами.
Класи використовують, щоб застосувати до елемента CSS-стилі:
<p id="message" class="message">Повідомлення</p>Для роботи з класами використовують властивість classList.
const message = document.querySelector('#message');
message.classList.add('message-success');Тепер елемент має два класи:
<p id="message" class="message message-success">
Повідомлення
</p>message.classList.remove('message-success');Метод toggle() додає клас, якщо його немає, і видаляє, якщо він уже є:
message.classList.toggle('is-hidden');Це зручно для показування та приховування елементів.
if (message.classList.contains('message-success')) {
console.log('Повідомлення успішне');
}Метод contains() повертає true або false.
message.classList.add('message', 'message-success');Також можна видалити кілька класів:
message.classList.remove('message', 'message-success');Нижче наведено повний приклад сторінки. Кнопка змінює текст повідомлення, його клас і значення атрибута data-status.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Зміна DOM</title>
<style>
body {
font-family: sans-serif;
padding: 24px;
}
.message {
padding: 12px;
border: 1px solid #999;
}
.message-success {
color: #176b2c;
background-color: #d9f7df;
border-color: #4caf50;
}
</style>
</head>
<body>
<p id="message" class="message" data-status="waiting">
Очікування дії
</p>
<button id="complete-button" type="button">
Завершити
</button>
<script>
const message = document.querySelector('#message');
const completeButton = document.querySelector('#complete-button');
completeButton.addEventListener('click', () => {
message.textContent = 'Операцію завершено';
message.classList.add('message-success');
message.setAttribute('data-status', 'completed');
console.log(message.getAttribute('data-status'));
});
</script>
</body>
</html>Після натискання кнопки відбуваються три зміни:
Текст елемента змінюється через textContent.
До елемента додається клас message-success.
Атрибут data-status отримує значення completed.
data-*Атрибути з префіксом data- призначені для зберігання додаткових даних у HTML:
<button id="product-button" data-product-id="42">
Додати товар
</button>Їх можна читати через getAttribute():
const productButton = document.querySelector('#product-button');
const productId = productButton.getAttribute('data-product-id');
console.log(productId); // 42Також для data-* існує властивість dataset:
const productId = productButton.dataset.productId;
console.log(productId); // 42Назва data-product-id у dataset перетворюється на productId.
Змінити таке значення можна обома способами:
productButton.dataset.productId = '100';або:
productButton.setAttribute('data-product-id', '100');Для одиничної зміни стилю можна використати властивість style:
const message = document.querySelector('#message');
message.style.color = 'green';
message.style.fontWeight = 'bold';Властивості CSS із дефісами записуються в JavaScript у camelCase:
background-color → backgroundColor;
font-size → fontSize;
border-radius → borderRadius.
message.style.backgroundColor = '#e0ffe5';
message.style.borderRadius = '8px';Для складніших стилів краще додавати або видаляти CSS-класи:
message.classList.add('message-success');Так стилі залишаються в CSS, а JavaScript лише керує станом елемента.
Якщо скрипт виконується до того, як потрібний елемент з’явився в документі, querySelector() може повернути null.
const message = document.querySelector('#message');
message.textContent = 'Новий текст';Якщо елемента ще немає, виникне помилка під час звернення до textContent.
Розміщуйте скрипт перед закривальним тегом body:
<body>
<p id="message">Текст</p>
<script src="script.js"></script>
</body>Або використовуйте атрибут defer:
<script src="script.js" defer></script>Якщо в HTML є:
<p id="message">Текст</p>то правильний селектор за ідентифікатором:
document.querySelector('#message');Символ # потрібен для пошуку за id, а символ . — для пошуку за класом:
document.querySelector('.message');classNameВластивість className замінює весь рядок класів:
element.className = 'new-class';Якщо до цього елемент мав інші класи, вони будуть видалені. Для точкових змін краще використовувати classList.add(), classList.remove() і classList.toggle().
Не вставляйте неперевірені дані через innerHTML:
element.innerHTML = userInput;Для простого тексту використовуйте:
element.textContent = userInput;Значення, отримані через getAttribute(), є рядками:
const count = element.getAttribute('data-count');
console.log(typeof count); // stringЯкщо значення потрібно використовувати як число, перетворіть його:
const count = Number(element.getAttribute('data-count'));textContent змінює текстовий вміст елемента.
innerHTML змінює HTML-вміст, але його не слід використовувати для неперевірених даних.
getAttribute() читає атрибут.
setAttribute() створює або змінює атрибут.
hasAttribute() перевіряє наявність атрибута.
removeAttribute() видаляє атрибут.
classList.add() додає клас.
classList.remove() видаляє клас.
classList.toggle() перемикає клас.
classList.contains() перевіряє наявність класу.
value і checked зручно використовувати для роботи з елементами форм.
Атрибути data-* можна читати та змінювати через dataset.
Для складних стилів краще керувати CSS-класами, а не змінювати стилі безпосередньо через JavaScript.