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() для пошуку першої кнопки на веб-сторінці.

автор: Bond

Маніпуляція з 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().

автор: Bond

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

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

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

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

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

автор: Bond

Порада

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

автор: Bond

Порада

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

автор: Bond

Порада

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

автор: Bond

Порада

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

автор: Bond

Порада

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

автор: Bond

Порада

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

автор: Bond

Нотатка

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

автор: Bond

Нотатка

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

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

автор: Bond

Синтаксис

let doc = new Document();

методи

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

властивості

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

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	1	1	1	3	12

Підтримка: мобільні переглядачі
Переглядач
	37	18	4	1

Підтримка: серверні переглядачі
Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

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

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

HTML

<div id="header">Демонстраційний елемент</div>

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

автор: Bond

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

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

HTML

<div class="myButton">перший елемент myButton</div>
<div class="myButton">другий елемент myButton</div>

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

автор: Bond

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

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

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!