JS властивість Document.documentElement

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

Властивість documentElement представляє собою кореневий елемент документа HTML або XML, зазвичай це <html> для HTML-документів. Ця властивість є важливим інструментом для роботи з DOM (Document Object Model), оскільки вона надає безпосередній доступ до кореневого елемента документа, дозволяючи розробникам здійснювати маніпуляції зі структурою та стилем сторінки. Використання documentElement є фундаментальним у веб-програмуванні, адже воно дозволяє взаємодіяти з DOM на найвищому рівні, забезпечуючи ефективне внесення змін до вмісту та властивостей веб-сторінки.

Одним з основних застосувань documentElement є доступ до властивостей кореневого елемента, наприклад, для отримання або зміни розмірів вікна перегляду. Розглянемо приклад, де ми хочемо змінити колір фону всієї веб-сторінки:

document.documentElement.style.backgroundColor = "lightblue";

У цьому випадку, використовуючи властивість style кореневого елемента, ми задаємо колір фону lightblue. Це простий, але вельми ефективний спосіб швидко внести зміни до вигляду сторінки.

Далі, documentElement може слугувати точкою доступу для визначення висоти або ширини веб-сторінки, що особливо корисно при створенні адаптивного дизайну. Наприклад, для отримання висоти відображуваної сторінки:

let height = document.documentElement.clientHeight;
console.log("Висота вікна перегляду:", height);

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

Розширені можливості

На більш складному рівні, documentElement може використовуватися для глибшої інтеграції зі структурою DOM, наприклад, при створенні скриптів, що динамічно модифікують структуру HTML-документів. Застосування методів, таких як appendChild або removeChild, до кореневого елемента дозволяє додавати або видаляти елементи на сторінці.

let newElement = document.createElement("p");
newElement.textContent = "Це новий абзац, доданий до кореня документа.";
document.documentElement.appendChild(newElement);

Цей приклад демонструє створення нового елемента <p> і його додавання безпосередньо до кореня документа, що може бути корисним для розширення вмісту сторінки на льоту.

автор: Bond

Порада

Щоб забезпечити кращу сумісність із різними браузерами, рекомендується перевіряти наявність documentElement перед його використанням. Хоча ця властивість є стандартною і підтримується усіма сучасними браузерами, умовна перевірка може запобігти помилкам у рідкісних випадках або у старих версіях браузерів.

автор: Bond

Порада

Використання documentElement може бути особливо корисним при розробці адаптивних веб-додатків або веб-сторінок, що потребують точного контролю над стилем та структурою документа на різних пристроях. Маніпулюючи стилями через documentElement, можна легко змінювати візуальне представлення веб-сторінки, реагуючи на зміни розмірів вікна перегляду або орієнтації пристрою.

автор: Bond

Порада

При роботі з динамічно генерованими веб-сторінками використовуйте documentElement для визначення розмірів вікна перегляду або для аналізу структури документа в цілому. Оскільки ця властивість посилається на кореневий елемент, вона дає змогу легко доступатися до ширини та висоти вікна перегляду через clientWidth та clientHeight.

console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);

автор: Bond

Синтаксис

Document.documentElement

Переглядачі

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

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

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

Приклади

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

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

HTML

<button id="themeToggle">Перемкнути</button>

document.getElementById('themeToggle').addEventListener('click', function() {
  if (document.documentElement.getAttribute('data-theme') === 'dark') {
    document.documentElement.setAttribute('data-theme', 'light');
    localStorage.setItem('theme', 'light'); // Збереження теми у локальному сховищі
  } else {
    document.documentElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme', 'dark'); // Збереження теми у локальному сховищі
  }
});

// При завантаженні сторінки перевірити збережену тему і застосувати її
document.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('theme') || 'light'; // За замовчуванням встановлюється світла тема
  document.documentElement.setAttribute('data-theme', savedTheme);
});

автор: Bond

Цей приклад показує, як реалізувати кнопку для плавної прокрутки сторінки до її верхньої частини, що покращує користувацький досвід на довгих сторінках.

HTML

<button id="scrollToTopButton">Прокрутити</button>

document.getElementById('scrollToTopButton').addEventListener('click', function() {
  // Використання documentElement для підтримки плавної прокрутки в усіх браузерах
  document.documentElement.scrollTo({
    top: 0, // Прокрутка до початку сторінки
    behavior: 'smooth' // Плавна прокрутка
  });
});

автор: Bond

Коментарі

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