Пошук уроків, статей та іншого контенту
Навчитеся знаходити елементи за тегом, класом, ідентифікатором і CSS-селекторами.
DOM — це об’єктне представлення HTML-документа. Браузер створює DOM-дерево, у якому кожен HTML-елемент представлений JavaScript-об’єктом.
Щоб змінити текст, стилі або атрибути елемента, спочатку потрібно його знайти.
Наприклад, маємо HTML:
<h1 id="title">Список покупок</h1>
<p class="description">Потрібно купити продукти</p>
<ul>
<li>Хліб</li>
<li>Молоко</li>
</ul>За допомогою JavaScript можна знайти:
елемент за ідентифікатором id;
елементи за назвою тегу;
елементи за класом;
елементи за CSS-селектором.
Для пошуку одного елемента за атрибутом id використовують метод getElementById():
const title = document.getElementById("title");
console.log(title);Метод повертає елемент, у якого id дорівнює "title".
Після пошуку з елементом можна працювати як з об’єктом:
const title = document.getElementById("title");
title.textContent = "Мій список покупок";
title.style.color = "darkgreen";Якщо елемента з таким id немає, метод повертає null:
const element = document.getElementById("missing");
console.log(element); // nullТому не можна одразу звертатися до властивостей такого результату:
const element = document.getElementById("missing");
// Помилка, бо element дорівнює null
element.textContent = "Новий текст";Перед використанням можна перевірити результат:
const element = document.getElementById("missing");
if (element !== null) {
element.textContent = "Новий текст";
}Ідентифікатор має бути унікальним у документі. На одній сторінці не варто використовувати однаковий id для кількох елементів.
Метод getElementsByTagName() знаходить усі елементи з певною назвою тегу:
const listItems = document.getElementsByTagName("li");
console.log(listItems);
console.log(listItems.length);Результатом є колекція елементів. Навіть якщо знайдено лише один елемент, результат усе одно буде колекцією.
Щоб отримати елемент за індексом, використовують квадратні дужки:
const listItems = document.getElementsByTagName("li");
console.log(listItems[0]);
console.log(listItems[1]);Індекси починаються з нуля.
Можна перебрати всі знайдені елементи:
const listItems = document.getElementsByTagName("li");
for (let i = 0; i < listItems.length; i++) {
listItems[i].style.color = "blue";
}Назву тегу можна записувати у верхньому або нижньому регістрі, але зазвичай використовують нижній:
const paragraphs = document.getElementsByTagName("p");Метод getElementsByClassName() знаходить усі елементи з указаним класом:
const cards = document.getElementsByClassName("card");
console.log(cards);Якщо HTML має такий вигляд:
<article class="card">Перша картка</article>
<article class="card">Друга картка</article>то будуть знайдені обидві картки.
Класи передаються без крапки:
document.getElementsByClassName("card");Правильно:
const elements = document.getElementsByClassName("card");Неправильно:
const elements = document.getElementsByClassName(".card");Крапка використовується в CSS-селекторах, але не в getElementsByClassName().
Метод також може шукати елементи, які мають кілька класів:
const activeCards = document.getElementsByClassName("card active");У цьому випадку будуть знайдені елементи, які одночасно мають класи card і active.
Методи querySelector() і querySelectorAll() дозволяють використовувати CSS-селектори.
querySelector()querySelector() повертає перший елемент, який відповідає селектору:
const title = document.querySelector("#title");
const card = document.querySelector(".card");
const paragraph = document.querySelector("p");Для різних типів селекторів використовують такий синтаксис:
p — усі елементи з тегом p;
.card — елемент із класом card;
#title — елемент з ідентифікатором title;
button.primary — кнопка з класом primary;
ul li — елемент li усередині ul;
[data-id="42"] — елемент з атрибутом data-id, що має значення 42.
На відміну від getElementsByTagName() і getElementsByClassName(), метод querySelector() повертає лише перший знайдений елемент:
const firstItem = document.querySelector("li");
console.log(firstItem);Якщо відповідного елемента немає, результатом буде null.
querySelectorAll()querySelectorAll() повертає всі елементи, які відповідають CSS-селектору:
const items = document.querySelectorAll("li");
console.log(items);
console.log(items.length);Можна використати складніші селектори:
const buttons = document.querySelectorAll("button.button");
const links = document.querySelectorAll("nav a");
const activeItems = document.querySelectorAll(".item.active");Для перебору результату зручно використовувати for...of або forEach():
const items = document.querySelectorAll("li");
items.forEach((item) => {
item.style.fontWeight = "bold";
});getElementById()Використовуйте, коли потрібно знайти один елемент за унікальним id:
const form = document.getElementById("registration-form");getElementsByTagName()Використовуйте для пошуку елементів за назвою тегу:
const images = document.getElementsByTagName("img");getElementsByClassName()Використовуйте для пошуку елементів за класом:
const messages = document.getElementsByClassName("message");querySelector()Використовуйте, коли потрібно знайти перший елемент за CSS-селектором:
const firstMessage = document.querySelector(".message");querySelectorAll()Використовуйте, коли потрібно знайти всі елементи за CSS-селектором:
const messages = document.querySelectorAll(".message");На практиці querySelector() і querySelectorAll() часто використовують найчастіше, оскільки вони підтримують широкий набір CSS-селекторів.
Методи пошуку можна викликати не лише для document, а й для окремого елемента.
Наприклад, знайдемо список, а потім — елементи всередині нього:
const shoppingList = document.querySelector(".shopping-list");
const items = shoppingList.querySelectorAll("li");
console.log(items);Так пошук обмежується лише вмістом shoppingList.
Це корисно, коли на сторінці є кілька однакових блоків:
<section class="products">
<h2>Продукти</h2>
<button class="buy-button">Купити</button>
</section>
<section class="services">
<h2>Послуги</h2>
<button class="buy-button">Замовити</button>
</section>Щоб знайти кнопку лише в блоці продуктів:
const products = document.querySelector(".products");
const buyButton = products.querySelector(".buy-button");
console.log(buyButton);У цьому прикладі JavaScript знаходить заголовок, елементи списку та кнопку, а потім змінює їх:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Пошук елементів у DOM</title>
<style>
.completed {
text-decoration: line-through;
color: gray;
}
</style>
</head>
<body>
<h1 id="page-title">Список завдань</h1>
<ul class="task-list">
<li class="task">Вивчити DOM</li>
<li class="task">Навчитися знаходити елементи</li>
<li class="task">Написати програму</li>
</ul>
<button id="complete-button">Позначити всі завдання</button>
<script>
const pageTitle = document.getElementById("page-title");
const tasks = document.querySelectorAll(".task");
const completeButton = document.querySelector("#complete-button");
pageTitle.textContent = "Мої завдання";
completeButton.addEventListener("click", () => {
tasks.forEach((task) => {
task.classList.add("completed");
});
});
</script>
</body>
</html>У прикладі:
getElementById("page-title") знаходить заголовок за ідентифікатором.
querySelectorAll(".task") знаходить усі завдання за класом.
querySelector("#complete-button") знаходить кнопку за CSS-селектором.
Після натискання кнопки кожному завданню додається клас completed.
JavaScript має виконуватися після того, як потрібні HTML-елементи вже створені браузером.
Найпростіший варіант — розмістити тег script перед закривальним тегом body:
<body>
<h1 id="title">Заголовок</h1>
<script src="script.js"></script>
</body>Так HTML-елемент h1 уже буде доступним під час виконання script.js.
Якщо скрипт підключений у head, можна дочекатися завантаження DOM:
document.addEventListener("DOMContentLoaded", () => {
const title = document.getElementById("title");
title.textContent = "Новий заголовок";
});getElementsByTagName() і getElementsByClassName() повертають HTMLCollection.
querySelectorAll() повертає NodeList.
Обидва результати можуть містити багато елементів і мають властивість length:
const items = document.querySelectorAll("li");
console.log(items.length);NodeList, отриманий через querySelectorAll(), підтримує forEach():
const items = document.querySelectorAll("li");
items.forEach((item) => {
console.log(item.textContent);
});Для універсального перебору можна використати цикл for...of:
const items = document.getElementsByClassName("item");
for (const item of items) {
console.log(item.textContent);
}На початковому етапі достатньо запам’ятати:
для одного елемента з id — getElementById();
для першого елемента за CSS-селектором — querySelector();
для всіх елементів за CSS-селектором — querySelectorAll().
# у getElementById()Неправильно:
const title = document.getElementById("#title");Правильно:
const title = document.getElementById("title");Метод getElementById() отримує лише назву ідентифікатора без символу #.
getElementsByClassName()Неправильно:
const cards = document.getElementsByClassName(".card");Правильно:
const cards = document.getElementsByClassName("card");Неправильно:
const items = document.querySelectorAll("li");
items.style.color = "red";items — це колекція. Потрібно перебрати її:
const items = document.querySelectorAll("li");
items.forEach((item) => {
item.style.color = "red";
});querySelector() поверне всі елементиconst buttons = document.querySelector(".button");Цей код повертає лише першу кнопку з класом button.
Для пошуку всіх кнопок потрібно використати:
const buttons = document.querySelectorAll(".button");Якщо скрипт виконується раніше за HTML-елемент, результатом може бути null.
Переконайтеся, що:
скрипт розміщений наприкінці body;
або використовується подія DOMContentLoaded.
Селектор повинен відповідати синтаксису CSS:
const element = document.querySelector(".card.active");Цей код знаходить елемент, який одночасно має класи card і active.
Створіть HTML-сторінку з такими елементами:
заголовком з id="title";
трьома абзацами з класом text;
списком із чотирьох елементів li;
кнопкою з класом change-button.
За допомогою JavaScript:
змініть текст заголовка;
змініть колір усіх абзаців;
виведіть у консоль кількість елементів списку;
змініть текст першого елемента списку;
знайдіть кнопку за CSS-селектором.
DOM містить об’єкти, що відповідають HTML-елементам.
getElementById() знаходить один елемент за ідентифікатором.
getElementsByTagName() знаходить елементи за назвою тегу.
getElementsByClassName() знаходить елементи за класом.
querySelector() повертає перший елемент, що відповідає CSS-селектору.
querySelectorAll() повертає всі елементи, що відповідають CSS-селектору.
Якщо елемент не знайдено, getElementById() і querySelector() повертають null.
Колекцію елементів потрібно перебирати перед зміною кожного елемента.
Пошук потрібно виконувати після завантаження відповідних HTML-елементів.