Наповнення 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("Кнопка була натиснута!");
});

Методи

hasFocus()
Визначає, чи є фокус документа в даний момент активним.
getElementsByTagName()
Повертає колекцію елементів, що відповідають заданому імені тега.
normalizeDocument()
Нормалізує структуру документа шляхом видалення порожніх текстових вузлів та об'єднання суміжних.
writeln()
Додає HTML-або текстовий контент до документа, завершуючи його новим рядком.
write()
Додає або замінює HTML-контент у поточному документі.
open()
Відкриває новий або очищає існуючий документ для динамічного наповнення.
removeEventListener()
Видаляє раніше зареєстрований обробник події з документа.
importNode()
Імпортує вузол з іншого документа до поточного, без зміни оригіналу.
querySelector()
Повертає перший елемент, що відповідає заданому CSS-селектору.
querySelectorAll()
Повертає усі елементи, що відповідають заданому CSS-селектору, у формі NodeList.
normalize()
Метод нормалізує вузли у DOM.
createDocumentFragment()
Створює та повертає порожній DocumentFragment, який може містити DOM вузли.
createTextNode()
Створює новий текстовий вузол у документі.
createElement()
Створює новий елемент в документі HTML.
execCommand()
Виконує команду редагування на елементі документу.
getElementsByName()
Повертає колекцію елементів з вказаним атрибутом name.
createEvent()
Ініціює створення нового об'єкта події.
getElementById()
Повертає елемент за унікальним ідентифікатором з HTML-документа.
addEventListener()
Додає обробник події до об'єкта.
getElementsByClassName()
Повертає живу колекцію елементів, що мають вказаний клас.
adoptNode()
Переміщує вузол з одного документа до поточного документа.
createComment()
Створює новий коментар у DOM, не відображаючи його на сторінці.
close()
Закриває документ, який був відкритий методом document.open().
renameNode()
Перейменовує вказаний вузол у дереві DOM, змінюючи його ім'я тегу.

Властивості

domConfig
Забезпечує доступ до об'єкта конфігурації DOM.
inputEncoding
Визначає кодування вхідного потоку даних документа.
charset
Повертає кодування символів поточного документа у формі рядка.
strictErrorChecking
Встановлює строгу перевірку помилок у документі.
documentMode
Визначає режим документа для сумісності з браузером.
doctype
Повертає об'єкт, що представляє тип документа (<!DOCTYPE>).
body
Представляє тіло документа як елемент DOM.
documentElement
Повертає елемент кореня документа, зазвичай <html>.
designMode
Дозволяє редагувати вміст цілого документа, як у текстовому редакторі.
anchors
Повертає всі якорі (<a> елементи з атрибутом 'name') у документі.
activeElement
Повертає елемент, що в даний момент має фокус у документі.
applets
Повертає всі об'єкти <applet> на веб-сторінці.
URL
Повертає або встановлює URL поточного документа.
forms
Повертає колекцію усіх форм <form> у документі.
implementation
Надає об'єкт, що дозволяє створювати та керувати документами DOM.
domain
Повертає або встановлює домен поточного документа.
head
Повертає посилання на елемент <head> поточного документа.
lastModified
Повертає дату та час останньої модифікації документа у форматі рядка.
characterSet
Визначає кодування символів, використане для документа.
images
Повертає колекцію усіх зображень (<img> елементів) у документі.
baseURI
Повертає абсолютний URI базової адреси документа.
cookie
Дозволяє читати та встановлювати кукі для документа.
referrer
Повертає URL-адресу документа, з якого користувач перейшов.
links
Містить колекцію посилань у документі.
scripts
Повертає колекцію скриптів, що є в документі.
title
Змінює або повертає заголовок поточної веб-сторінки.
readyState
Вказує на поточний стан завантаження документа.
defaultView
Повертає об'єкт вікна, що асоційований з документом.
documentURI
Повертає URI поточного документа як рядок.