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, це може викликати повторний рендеринг елементів, що може сповільнити роботу сторінки.

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

Синтаксис

let doc = new Document();

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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

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 поточного документа.

links

Містить колекцію посилань у документі.

forms

Повертає колекцію усіх форм <form> у документі.

implementation

Надає об'єкт, що дозволяє створювати та керувати документами DOM.

domain

Повертає або встановлює домен поточного документа.

head

Повертає посилання на елемент <head> поточного документа.

lastModified

Повертає дату та час останньої модифікації документа у форматі рядка.

characterSet

Визначає кодування символів, використане для документа.

images

Повертає колекцію усіх зображень (<img> елементів) у документі.

baseURI

Повертає абсолютний URI базової адреси документа.

cookie

Дозволяє читати та встановлювати кукі для документа.

referrer

Повертає URL-адресу документа, з якого користувач перейшов.

scripts

Повертає колекцію скриптів, що є в документі.

title

Змінює або повертає заголовок поточної веб-сторінки.

readyState

Вказує на поточний стан завантаження документа.

defaultView

Повертає об'єкт вікна, що асоційований з документом.

documentURI

Повертає URI поточного документа як рядок.