JavaScript DOM

Додавати та видаляти HTML-елементи, заміняти одні елементи іншими.

Маніпулювати CSS-стилями, додаючи стилі напряму як інлайн стилі або змінювати клас елемента, що впливає на його стидізацію.

document.getElementById(id)

Повертає лише один елемент, оскільки id має бути унікальним у межах сторінки. Якщо елемент з таким id не знайдено, повертає null.

let element = document.getElementById('myId');

document.getElementsByClassName(className)

Вибирає всі елементи, які мають вказаний клас. Повертає HTMLCollection (живу колекцію), яка автоматично оновлюється при зміні DOM. Якщо елементів не знайдено, повертає порожню колекцію.

let elements = document.getElementsByClassName('myClass');

document.getElementsByTagName(tagName)

Вибирає всі елементи з вказаним тегом (наприклад, div, p, a).Повертає HTMLCollection (живу колекцію), яка автоматично оновлюється при зміні DOM. Якщо елементів не знайдено, повертає порожню колекцію.

let element = document.getElementById('myId');

document.querySelector(selector)

Вибирає перший елемент, який відповідає вказаному CSS-селектору. Повертає лише один елемент. Якщо елемент не знайдено, повертає null. Може використовувати будь-який CSS-селектор.

let element = document.querySelector('.myClass');

document.querySelectorAll(selector)

Вибирає всі елементи, які відповідають вказаному CSS-селектору. Повертає NodeList (статичну колекцію), яка не оновлюється автоматично при зміні DOM. Якщо елементів не знайдено, повертає порожню колекцію. Може використовувати будь-який CSS-селектор.

let elements = document.querySelectorAll('.myClass');

document.getElementsByName(name)

Вибирає всі елементи з вказаним значенням атрибута name. Повертає NodeList (статичну колекцію), яка не оновлюється автоматично при зміні DOM.

let elements = document.getElementsByName('myName');

innerHTML

innerHTML дозволяє змінювати або отримувати HTML-вміст елемента.

let content = document.getElementById("myElement").innerHTML;
console.log(content); // Виведе поточний HTML-код всередині елемента

📌 Коли варто використовувати?

• ✅Якщо потрібно додати HTML-код.
• ✅Якщо треба вставити багато тегів.

⚠️ Мінуси:

• ⛔️Може спричинити проблеми з безпекою (XSS-атаки, якщо вставляти користувацький ввід).
• ⛔️Повністю перезаписує вміст (може видалити вкладені обробники подій).

innerText

innerText дозволяє змінювати або отримувати текстовий вміст елемента, без тегів.

document.getElementById("myElement").innerText = "Привіт, світ!";

📌 Яка Відмінність від innerHTML?

innerText не інтерпретує HTML-теги, а просто вставляє текст.

textContent

innerHTML дозволяє змінювати або отримувати HTML-вміст елемента.

<div id="myElement" style="display: none;">Прихований текст</div>

console.log(document.getElementById("myElement").textContent); // "Прихований текст"

📌 Коли варто використовувати textContent замість innerText?

textContent повертає ВЕСЬ текст елемента, навіть прихований за CSS (display: none). innerText не повертає прихований текст.

value

Якщо потрібно змінити текст в полях введення (<input> або <textarea>), то використовуйте value:

<input type="text" id="myInput" value="Старий текст">
document.getElementById("myInput").value = "Новий текст";

📌 Коли варто використовувати?

Для зміни вмісту полів введення (<input>, <textarea>).

createTextNode

Якщо треба додати текст без ризику вставки HTML, можна використовувати createTextNode().

let newText = document.createTextNode("Привіт, світ!");
document.getElementById("myElement").appendChild(newText);

📌 Перевага: не дозволяє вставку HTML, тому безпечніше.

insertAdjacentHTML

Якщо потрібно вставити HTML без перезапису всього вмісту елемента:

document.getElementById("myElement").insertAdjacentHTML("beforeend", "<b>Додатковий текст</b>");

📌 Режими вставки:

• "beforebegin" – перед елементом.
• "afterbegin" – всередині, перед наявним вмістом.
• "beforeend" – всередині, після наявного вмісту.
• "afterend" – після елемента.

1. Властивість style (inline-стилі)

Цей метод дозволяє змінювати стилі елемента безпосередньо через JavaScript.

Синтаксис:

element.style.property = "значення";

❗️Стилі змінюються лише для конкретного елемента, а не для всіх подібних.

🔅 Важливі моменти:

• ✅Використовуємо camelCase (без - між словами). Наприклад, background-color → backgroundColor.
• ✅Працює тільки для inline-стилів (ті, що безпосередньо додаються до елемента).

const box = document.getElementById("box"); // Отримуємо елемент
box.style.backgroundColor = "red"; // Змінюємо колір фону
box.style.width = "200px"; // Встановлюємо ширину
box.style.height = "100px"; // Встановлюємо висоту

2. CSS-класи classList

Зручніший метод для додавання, видалення або перемикання CSS-класів. Методи classList:

• element.classList.add(“class-name”) – додає клас.
• element.classList.remove(“class-name”) – видаляє клас.
• element.classList.toggle(“class-name”) – додає клас, якщо його немає, або видаляє, якщо є.
• element.classList.contains(“class-name”) – перевіряє, чи є клас.
• element.classList.replace(“old-class”, “new-class”);

✅Можна легко застосовувати стилі з CSS, а не вручну прописувати кожне значення.

const box = document.getElementById("box");
box.classList.add("active"); // Додає клас "active"
box.classList.remove("hidden"); // Видаляє клас "hidden"
box.classList.toggle("selected"); // Якщо "selected" є - видаляє, якщо немає - додає
element.classList.replace("old-class", "new-class");// Якщо "old-class" є, він змінюється на "new-class".

3. getComputedStyle – отримання поточних стилів

Якщо треба дізнатися, який стиль зараз застосований до елемента.

✅Показує реальний стиль, навіть якщо він заданий через CSS, а не style

const box = document.getElementById("box");
const styles = getComputedStyle(box);
console.log(styles.backgroundColor); // Виведе, наприклад, "rgb(255, 0, 0)"
//Синтаксис:
getComputedStyle(element)
getComputedStyle(element, pseudoElt)

4. Додавання стилів через setAttribute

Недолік: Перезаписує всі попередні inline-стилі.

5. Створення та додавання стилів через Style

Якщо потрібно додати стилі через JavaScript в <style>.

✅Показує реальний стиль, навіть якщо він заданий через CSS, а не style

const style = document.createElement("style");
style.textContent = `
  .dynamic-style {
    color: white;
    background-color: black;
    padding: 10px;
  }
`;
document.head.appendChild(style); // Додаємо стиль у <head>

const box = document.getElementById("box");
box.classList.add("dynamic-style"); // Додаємо клас до елемента
element - це елемент, для якого потрібно отримати обчислений стиль.
pseudoElt - не обовязковий параметр, цеядок, що вказує псевдоелемент для збігу.

• id — унікальний ідентифікатор елемента
• class — клас для застосування стилів
• src — шлях до зображення для тегу <img>
• href — посилання для тегу <a>
• alt — альтернативний текст для зображення (якщо зображення не завантажиться)
• type — визначає тип елемента форми (наприклад, текст, пароль, кнопка)
• value — значення елемента форми (наприклад, текст у полі вводу)
• placeholder — текст-підказка для поля вводу
• disabled — робить елемент форми неактивним
• controls — додає елементам відео чи аудіо кнопки управління (відтворення, пауза тощо)
• autoplay — автоматичне відтворення відео чи аудіо
• loop — повторне відтворення мультимедіа
• colspan — об’єднує кілька стовпців у таблиці
• rowspan — об’єднує кілька рядків у таблиці
• data-* — користувацькі атрибути, які можна використовувати для зберігання додаткової інформації
• aria-* — атрибути для покращення доступності веб-сторінок
• title — текст, який з’являється при наведенні на елемент
• style — додає вбудовані стилі до елемента

🔸 Якщо хочете тільки HTML-теги — використовуйте:

• children
• firstElementChild
• nextElementSibling

🔸 Якщо потрібно бачити все (включно з пробілами/текстом) — використовуйте:

• childNodes
• firstChild
• nextSibling