Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

JS об'єкт Document

Введення в об'єкт Document

Об'єкт Document є ключовим елементом в моделі об'єкта документа (DOM), яка представляє структуру веб-документа. Через цей об'єкт можна взаємодіяти з вмістом, структурою та стилем веб-сторінки. Це є вхідною точкою для багатьох операцій в JavaScript, таких як додавання елементів, видалення, зміни атрибутів та інші маніпуляції з DOM.

Властивості та методи

Об'єкт Document має ряд властивостей та методів, які надають засоби для роботи з вмістом веб-сторінки. Наприклад, властивість document.body дає доступ до тіла документа, а метод document.createElement() дозволяє створювати нові DOM-елементи.

Приклад 1: Доступ до елементів

const title = document.title;
const body = document.body;

В цьому прикладі ми використовуємо властивість document.title для отримання заголовка документа і document.body для доступу до тіла документа. Селектори

Document можна також використовувати методи для пошуку елементів. Один з найбільш поширених — document.querySelector(), який повертає перший елемент, що відповідає заданому CSS-селектору.

Приклад 2: Пошук елементів

const button = document.querySelector('button');

В цьому прикладі ми використовуємо метод document.querySelector() для пошуку першої кнопки на веб-сторінці.

Маніпуляція з DOM через Document

Одна з основних задач при роботі з Document — це маніпуляція з DOM. Ви можете створювати, змінювати та видаляти елементи та їх атрибути.

Створення елементів

Ви можете створювати нові елементи за допомогою методу document.createElement().

Приклад 3: Створення нового елемента

const newParagraph = document.createElement('p');
newParagraph.textContent = "Це новий параграф.";
document.body.appendChild(newParagraph);

В даному прикладі ми створюємо новий параграф за допомогою методу document.createElement(). Після цього ми встановлюємо текст для цього параграфа і додаємо його до тіла документа методом appendChild(). Редагування та видалення елементів

Ви також можете редагувати або видаляти існуючі елементи.

Приклад 4: Видалення елемента

const oldParagraph = document.querySelector('p.old');
oldParagraph.remove();

Тут ми використовуємо метод document.querySelector() для знаходження параграфа з класом "old" і видаляємо його з DOM методом remove().

Оптимізація роботи з DOM

При взаємодії з Document Object Model (DOM) дуже важливо дбати про оптимізацію, адже DOM-операції, зокрема читання та запис, можуть бути відносно повільними, особливо якщо вони проводяться великою кількістю або без належної уваги до процесу. Неоптимізована робота з DOM може призвести до затримок у відповіді інтерфейсу, що негативно вплине на користувацький досвід.

Чому оптимізація є важливою?

Рендеринг: Браузери оптимізовані для швидкого рендерингу сторінок. Але коли ми часто змінюємо DOM, це може викликати повторний рендеринг елементів, що може сповільнити роботу сторінки.

Рефлови та перерендерінги: Кожен раз, коли ви змінюєте розміри, положення або інші характеристики елемента, браузер може потребувати знову розраховувати розташування інших елементів на сторінці, що відоме як "рефлов". Це може бути вартісним процесом.

Порада:

Використовуйте методи querySelector та querySelectorAll для пошуку елементів. Ці методи надають більш потужний та гнучкий механізм для вибору елементів у DOM, порівняно з старими методами, такими як getElementById або getElementsByClassName.

Порада:

Під час додавання обробників подій до елементів у DOM, пам'ятайте про те, що вони можуть накопичуватися та спричиняти витоки пам'яті, якщо ви не видаляєте їх правильно. Спробуйте використовувати делегування подій, де це можливо, щоб зменшити кількість обробників.

Порада:

Старайтеся не змішувати використання різних методів маніпуляції DOM, як-от jQuery і чистий JavaScript. Це може ускладнити підтримку коду.

Нотатка:

Коли ви працюєте з DOM, кожна операція впливає на швидкість вашої веб-сторінки. Тому завжди слід ретельно планувати свої дії та оптимізувати код, де це можливо.

Кожен раз, коли ви звертаєтеся до DOM або змінюєте його, це може призвести до перерендерування сторінки. Це може значно уповільнити вашу сторінку. Замість того, намагайтеся виконувати зміни за допомогою одного великого оновлення, замість багатьох маленьких. Також старайтеся зберігати посилання на елементи, до яких ви звертаєтеся часто заради економії.

Нотатка:

Зверніть увагу на безпеку. Наприклад, не використовуйте innerHTML для вставки невідомого або ненадійного контенту, оскільки це може призвести до атак XSS.

Порада:

Працюйте поза DOM де це можливо. Якщо ви можете обчислити деякі значення або виконати деякі операції без звертання до DOM, це буде швидше. Наприклад, обчислення значення в JavaScript перед його вставкою в DOM буде ефективнішим.

Порада:

Використовуйте DocumentFragment. Коли вам потрібно вставити багато елементів в DOM, використовуйте DocumentFragment. Це дозволить вам збільшити швидкість вставки, оскільки вміст DocumentFragment вставляється одночасно, уникнувши зайвих рефловів.

Порада:

Оминайте вбудовані методи. Іноді вбудовані методи, такі як innerHTML, можуть бути повільнішими, ніж прямі DOM-операції. Замість цього використовуйте методи, такі як createElement та appendChild.

Синтаксис

let doc = new Document();

Переглядачі

Переглядач

1

1

1

3

12

Переглядач

37

18

4

1

Переглядач

0.10.0

1.0

Приклади


Часто потрібно додати новий елемент на сторінку, наприклад, після завантаження даних з сервера. За допомогою Document це можна зробити динамічно та ефективно.

let newElement = document.createElement("p");
newElement.textContent = "Це новий елемент!";
document.body.appendChild(newElement);

Ідентифікація елементів за ID є одним з найпоширеніших методів роботи з DOM. Це корисно, коли вам потрібно швидко знайти конкретний елемент та внести в нього зміни.

Тут ми знаходимо елемент з ID "header" та змінюємо його текстовий вміст.

let headerElement = document.getElementById("header");
headerElement.textContent = "Змінений заголовок";

Обробка подій є ключовим аспектом інтерактивних веб-сторінок. За допомогою Document можна легко додавати обробники подій до елементів.

У цьому прикладі ми знаходимо кнопку з класом "myButton" і додаємо до неї обробник подій, який виведе сповіщення при її натисканні.

let buttonElement = document.querySelector(".myButton");
buttonElement.addEventListener("click", function() {
    alert("Кнопка була натиснута!");
});

Методи

Властивості