document.documentElement — кореневий елемент html сторінки
Загальний опис
Властивість 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> і його додавання безпосередньо до кореня документа, що може бути корисним для розширення вмісту сторінки на льоту.
- Порада
-
Щоб забезпечити кращу сумісність із різними браузерами, рекомендується перевіряти наявність
автор: BonddocumentElementперед його використанням. Хоча ця властивість є стандартною і підтримується усіма сучасними браузерами, умовна перевірка може запобігти помилкам у рідкісних випадках або у старих версіях браузерів. - Порада
-
Використання
автор: BonddocumentElementможе бути особливо корисним при розробці адаптивних веб-додатків або веб-сторінок, що потребують точного контролю над стилем та структурою документа на різних пристроях. Маніпулюючи стилями черезdocumentElement, можна легко змінювати візуальне представлення веб-сторінки, реагуючи на зміни розмірів вікна перегляду або орієнтації пристрою. - Порада
-
При роботі з динамічно генерованими веб-сторінками використовуйте
documentElementдля визначення розмірів вікна перегляду або для аналізу структури документа в цілому. Оскільки ця властивість посилається на кореневий елемент, вона дає змогу легко доступатися до ширини та висоти вікна перегляду черезclientWidthтаclientHeight.
автор: Bondconsole.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
Синтаксис
Document.documentElementПереглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 7 | 12 | 5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі реалізується можливість динамічної зміни теми сайту між світлою та темною, зберігаючи вибір користувача у локальному сховищі для подальшого використання.
HTML
<button id="themeToggle">Перемкнути</button>JS
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);
});Цей приклад показує, як реалізувати кнопку для плавної прокрутки сторінки до її верхньої частини, що покращує користувацький досвід на довгих сторінках.
HTML
<button id="scrollToTopButton">Прокрутити</button>JS
document.getElementById('scrollToTopButton').addEventListener('click', function() {
// Використання documentElement для підтримки плавної прокрутки в усіх браузерах
document.documentElement.scrollTo({
top: 0, // Прокрутка до початку сторінки
behavior: 'smooth' // Плавна прокрутка
});
});Коментарі
Коментарів ще немає — будьте першим!