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> і його додавання безпосередньо до кореня документа, що може бути корисним для розширення вмісту сторінки на льоту.
| Порада: | Щоб забезпечити кращу сумісність із різними браузерами, рекомендується перевіряти наявність |
| Порада: | При роботі з динамічно генерованими веб-сторінками використовуйте |
| Порада: | Використання |
Синтаксис
Document.documentElementЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
7 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі реалізується можливість динамічної зміни теми сайту між світлою та темною, зберігаючи вибір користувача у локальному сховищі для подальшого використання.
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);
});Цей приклад показує, як реалізувати кнопку для плавної прокрутки сторінки до її верхньої частини, що покращує користувацький досвід на довгих сторінках.
document.getElementById('scrollToTopButton').addEventListener('click', function() {
// Використання documentElement для підтримки плавної прокрутки в усіх браузерах
document.documentElement.scrollTo({
top: 0, // Прокрутка до початку сторінки
behavior: 'smooth' // Плавна прокрутка
});
});