Об'єкт document у JavaScript — доступ до DOM сторінки

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

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

правити

Загальний опис

правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Нотатка

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

автор: Bond правити

Нотатка

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

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

let doc = new Document();

методи

властивості

Переглядачі

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

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

Переглядач
	1	1	1	3	12	4

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

Переглядач
	1	18	4	1

Приклади

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

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

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

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

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

// скрипт стоїть у розмітці, тому документ ще будується
console.log('document.readyState:', document.readyState);          // loading
console.log('document === window.document:', document === window.document); // true

const box = document.createElement('section');
const title = document.createElement('h2');
title.textContent = 'Створено зі скрипта';
box.append(title);
document.body.append(box);

const p = document.createElement('p');
p.textContent = '<b>текст, а не розмітка</b>';   // textContent екранує — це і рятує від XSS
box.append(p);
console.log('у DOM потрапило як текст:', p.innerHTML);

// querySelector повертає null, якщо не знайшов, — і наступний рядок падає
const missing = document.querySelector('.no-such-class');
console.log('нічого не знайшли:', missing);                        // null
try { missing.textContent = 'ой'; } catch (e) { console.log('типове падіння:', e.name); }

// querySelectorAll завжди дає колекцію, навіть порожню
console.log('абзаців знайдено:', document.querySelectorAll('p').length);        // 1
console.log('порожня вибірка:', document.querySelectorAll('.no-such-class').length); // 0
console.log('дітей у body:', document.body.children.length);

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